360f6f8336
The old system was getting too complicated to add new features to. The new one should be easier to understand and will be explained below. This patch should fix #140 and fix #16. There are several places where new data requests may come from: - chat.needMoreMessages checks if we are scrolled too far up or there is no scrollbar. It then requests new messages. - scrolling up - switching the chat tab via chat.chooser - auto refresh - once on boot The latter two always request both types of chat. Faction and public are handled the same way. Public is later split into categories. I will explain the faction chat here because it’s easier. It starts in chat.requestFaction. This will initialize the query to the server for data. The exact query is determined by chat. genPostData. There can only be one faction chat request at a time. Clearing on map move is handled automatically in code/requests.js. Let’s assume the data query is successful. It is now passed to chat.handleFaction which runs some basic checks before the data is processed and stored in chat._factionData. This is done by chat. writeDataToHash. The hash keys are the message GUIDs to avoid duplicates. The hash values are an array of timestamp, processed message and other meta data. There is only one way to render faction chat, so data is directly handed to chat.renderFaction which immediately hands it to chat .renderData. renderData discards the GUIDs and sorts the values by their timestamp. It then iterates over the data to insert date break lines and finally renders the data in the DOM. It also does some magic to keep the correct scrolling position. Chat data will be cleared on map move or zoom. However, the display is not refreshed, so the old, invalid chat data is still displayed. Only once the data query is finished the data is rendered. The upside is that small map operations within your local area appear to never lose their chat data. Downside is that there’s invalid chat for some time when changing cities.
619 lines
9.4 KiB
CSS
619 lines
9.4 KiB
CSS
/* update notice */
|
||
body:after {
|
||
background: none repeat scroll 0 0 #FFFFFF;
|
||
color: red;
|
||
content: "Please update your total conversion script or it will not work properly anymore. \a Google \"ingress total conversion\".";
|
||
display: block;
|
||
font-weight: bold;
|
||
left: 381px;
|
||
padding: 2px;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 9001;
|
||
white-space: pre;
|
||
text-align: center;
|
||
}
|
||
|
||
/* general rules ******************************************************/
|
||
|
||
html, body, #map {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-size: 14px;
|
||
font-family: "coda",arial,helvetica,sans-serif;
|
||
margin: 0;
|
||
}
|
||
|
||
#scrollwrapper {
|
||
overflow: hidden;
|
||
position: fixed;
|
||
right: -38px;
|
||
top: 0;
|
||
width: 340px;
|
||
bottom: 45px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
#sidebar {
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
border-left: 1px solid #20A8B1;
|
||
color: #888;
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
max-height: 100%;
|
||
overflow-y:scroll;
|
||
overflow-x:hidden;
|
||
z-index: 3000;
|
||
}
|
||
|
||
#sidebartoggle {
|
||
display: block;
|
||
padding: 20px 5px;
|
||
margin-top: -31px; /* -(toggle height / 2) */
|
||
line-height: 10px;
|
||
position: absolute;
|
||
top: 340px; /* (sidebar height / 2) */
|
||
z-index: 3001;
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
color: #FFCE00;
|
||
border: 1px solid #20A8B1;
|
||
border-right: none;
|
||
border-radius: 5px 0 0 5px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.enl {
|
||
color: #03fe03 !important;
|
||
}
|
||
|
||
.res {
|
||
color: #00c5ff !important;
|
||
}
|
||
|
||
.none {
|
||
color: #fff;
|
||
}
|
||
|
||
a {
|
||
color: #ffce00;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* map display, required because GMaps uses a high z-index which is
|
||
* normally above Leaflet’s vector pane */
|
||
.leaflet-map-pane {
|
||
z-index: 1000;
|
||
}
|
||
|
||
.leaflet-control-layers-overlays label.disabled {
|
||
text-decoration: line-through;
|
||
cursor: help;
|
||
}
|
||
|
||
.help {
|
||
cursor: help;
|
||
}
|
||
|
||
.toggle {
|
||
display: block;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
|
||
|
||
/* chat ***************************************************************/
|
||
|
||
#chatcontrols {
|
||
color: #FFCE00;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 3001;
|
||
height: 26px;
|
||
padding-left:1px;
|
||
}
|
||
|
||
#chatcontrols.expand {
|
||
top: 0;
|
||
bottom: auto;
|
||
}
|
||
|
||
#chatcontrols a {
|
||
margin-left: -1px;
|
||
display: inline-block;
|
||
width: 94px;
|
||
text-align: center;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border: 1px solid #20A8B1;
|
||
vertical-align: top;
|
||
}
|
||
|
||
#chatcontrols a:first-child {
|
||
letter-spacing:-1px;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
#chatcontrols a.active {
|
||
border-color: #FFCE00;
|
||
border-bottom-width:0px;
|
||
font-weight:bold
|
||
}
|
||
|
||
#chatcontrols a.active + a {
|
||
border-left-color: #FFCE00
|
||
}
|
||
|
||
|
||
#chatcontrols .toggle {
|
||
border-left: 10px solid transparent;
|
||
border-right: 10px solid transparent;
|
||
margin: 6px auto auto;
|
||
}
|
||
|
||
#chatcontrols .expand {
|
||
border-bottom: 10px solid #FFCE00;
|
||
}
|
||
|
||
#chatcontrols .shrink {
|
||
border-top: 10px solid #FFCE00;
|
||
}
|
||
|
||
|
||
#chat {
|
||
position: absolute;
|
||
width: 708px;
|
||
bottom: 24px;
|
||
left: 0;
|
||
z-index: 3000;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
font-size: 12.6px;
|
||
color: #eee;
|
||
border: 1px solid #20A8B1;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
em {
|
||
color: red;
|
||
font-style: normal;
|
||
}
|
||
|
||
#chat.expand {
|
||
height:auto;
|
||
top: 25px;
|
||
}
|
||
|
||
#chatpublic, #chatfull, #chatcompact, /* FIXME DEPRECATED: */#chatautomated {
|
||
display: none;
|
||
}
|
||
|
||
#chat > div {
|
||
overflow-x:hidden;
|
||
overflow-y:scroll;
|
||
height: 100%; /* fallback for Opera which doesn’t support calc */
|
||
height: calc(100% - 4px);
|
||
height: -webkit-calc(100% - 4px);
|
||
height: -moz-calc(100% - 4px);
|
||
padding: 2px;
|
||
position:relative;
|
||
}
|
||
|
||
#chat p {
|
||
display: block;
|
||
padding: 1px 2px;
|
||
margin:0;
|
||
}
|
||
|
||
#chat time {
|
||
cursor: help;
|
||
}
|
||
|
||
time, mark, #chat span, #chat a {
|
||
font-family: Verdana, sans-serif;
|
||
font-size: 12.6px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
time {
|
||
display: inline-block;
|
||
width: 44px;
|
||
color: #bbb;
|
||
overflow: hidden;
|
||
}
|
||
|
||
mark {
|
||
display: inline-block;
|
||
width: 91px;
|
||
margin-right:4px;
|
||
overflow:hidden;
|
||
vertical-align: top;
|
||
background: transparent;
|
||
}
|
||
|
||
summary {
|
||
color: #bbb;
|
||
display: inline-block;
|
||
font-family: Verdana,sans-serif;
|
||
height: 16px;
|
||
overflow: hidden;
|
||
padding: 0 2px;
|
||
white-space: nowrap;
|
||
width: 683px;
|
||
}
|
||
|
||
#chat span {
|
||
display: inline-block;
|
||
width: 540px;
|
||
}
|
||
|
||
#chatinput {
|
||
line-height:22px;
|
||
padding: 0 4px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
width: 700px;
|
||
border: 1px solid #20A8B1;
|
||
z-index: 3001;
|
||
}
|
||
|
||
#chat .invisibleseparator {
|
||
color: rgba(8, 48, 78, 0.0);
|
||
overflow: hidden;
|
||
width: 0px;
|
||
}
|
||
|
||
|
||
#chatinput span {
|
||
font-family: Verdana,sans-serif;
|
||
display: inline-block;
|
||
font-size: 12.6px;
|
||
width: 84px;
|
||
color: red;
|
||
padding: 0 4px 0 1px;
|
||
width: 85px;
|
||
}
|
||
|
||
#chatinput input {
|
||
background: transparent;
|
||
font-size: 12.6px;
|
||
font-family: Verdana,sans-serif;
|
||
color: #EEEEEE;
|
||
width: 558px
|
||
}
|
||
|
||
|
||
|
||
/* sidebar ************************************************************/
|
||
|
||
#sidebar > * {
|
||
border-bottom: 1px solid #20A8B1;
|
||
}
|
||
|
||
|
||
|
||
#sidebartoggle .toggle {
|
||
border-bottom: 10px solid transparent;
|
||
border-top: 10px solid transparent;
|
||
}
|
||
|
||
#sidebartoggle .open {
|
||
border-right: 10px solid #FFCE00;
|
||
}
|
||
|
||
#sidebartoggle .close {
|
||
border-left: 10px solid #FFCE00;
|
||
}
|
||
|
||
/* player stats */
|
||
#playerstat {
|
||
height: 30px;
|
||
}
|
||
|
||
h2 {
|
||
color: #ffce00;
|
||
font-size: 21px;
|
||
padding: 0 4px;
|
||
margin: 0;
|
||
cursor:help;
|
||
}
|
||
|
||
h2 span {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 205px;
|
||
}
|
||
|
||
h2 div {
|
||
float: right;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
h2 sup, h2 sub {
|
||
display: block;
|
||
font-size: 11px;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
|
||
/* gamestats */
|
||
#gamestat, #gamestat span {
|
||
height: 22px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
#gamestat span {
|
||
display: block;
|
||
float: left;
|
||
font-weight: bold;
|
||
cursor:help;
|
||
}
|
||
|
||
#gamestat .res {
|
||
background: #005684;
|
||
text-align: right;
|
||
}
|
||
|
||
#gamestat .enl {
|
||
background: #017f01;
|
||
}
|
||
|
||
|
||
/* geosearch input, and others */
|
||
input {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
color: #ffce00;
|
||
height: 22px;
|
||
line-height: 22px;
|
||
padding: 0 4px;
|
||
font-size: 14px;
|
||
border:0;
|
||
font-family:inherit;
|
||
}
|
||
|
||
::-webkit-input-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
:-moz-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
::-moz-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
/* portal title and image */
|
||
h3 {
|
||
font-size: 17px;
|
||
padding: 0 4px;
|
||
margin:0;
|
||
height: 25px;
|
||
width: 100%;
|
||
overflow:hidden;
|
||
text-overflow: "~";
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.imgpreview {
|
||
height: 200px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imgpreview img {
|
||
cursor: help;
|
||
}
|
||
|
||
#level {
|
||
font-size: 40px;
|
||
position: absolute;
|
||
right: 10px;
|
||
text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 5px #fff;
|
||
top: 100px;
|
||
}
|
||
|
||
/* portal mods */
|
||
.mods {
|
||
margin-bottom: 1px;
|
||
margin-top: 5px;
|
||
height: 75px;
|
||
}
|
||
|
||
.mods span {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
/* can’t use inline-block because Webkit’s implementation is buggy and
|
||
* introduces additional margins in random cases. No clear necessary,
|
||
* as that’s solved by setting height on .mods. */
|
||
display: block;
|
||
float:left;
|
||
height: 63.7px;
|
||
margin-left: 4px;
|
||
overflow: hidden;
|
||
padding: 2px;
|
||
text-align: center;
|
||
width: 63.7px;
|
||
cursor:help;
|
||
border: 1px solid #666;
|
||
}
|
||
|
||
.mods span[title=""] {
|
||
cursor: auto;
|
||
}
|
||
|
||
.res .mods span, .res .meter {
|
||
border: 1px solid #0076b6;
|
||
}
|
||
.enl .mods span, .enl .meter {
|
||
border: 1px solid #017f01;
|
||
}
|
||
|
||
/* random details list */
|
||
#randdetails {
|
||
margin: 0 4px;
|
||
margin-top: 11px;
|
||
}
|
||
|
||
aside {
|
||
display: inline-block;
|
||
width: 140px;
|
||
}
|
||
|
||
aside span {
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
white-space: nowrap;
|
||
width: 74px;
|
||
}
|
||
|
||
aside:nth-child(odd) {
|
||
margin-right: 4px;
|
||
text-align: right;
|
||
}
|
||
|
||
aside:nth-child(even) {
|
||
margin-left: 4px;
|
||
text-align: left;
|
||
}
|
||
|
||
aside:nth-child(even) span {
|
||
float: right;
|
||
padding-left: 4px;
|
||
text-align: left;
|
||
}
|
||
|
||
aside:nth-child(odd) span {
|
||
float: left;
|
||
padding-right: 4px;
|
||
text-align: right;
|
||
}
|
||
|
||
#randdetails tt {
|
||
font-family: inherit;
|
||
cursor: help;
|
||
}
|
||
|
||
|
||
/* resonators */
|
||
#resodetails {
|
||
white-space: nowrap;
|
||
margin: 16px 0;
|
||
-moz-column-gap: 10px;
|
||
-moz-column-width: 141px;
|
||
-webkit-column-gap: 10px;
|
||
-webkit-column-width: 141px;
|
||
}
|
||
|
||
.meter {
|
||
background: #000;
|
||
cursor: help;
|
||
display: inline-block;
|
||
height: 14px;
|
||
padding: 1px;
|
||
width: 58px;
|
||
}
|
||
|
||
.meter-text {
|
||
display: inline-block;
|
||
height: 18px;
|
||
margin: 0 4px;
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 75px;
|
||
}
|
||
|
||
.meter-text.left {
|
||
text-align: right;
|
||
}
|
||
|
||
.meter span {
|
||
display: block;
|
||
height: 14px;
|
||
}
|
||
|
||
.meter-rel {
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.meter-level {
|
||
position: absolute;
|
||
top: -2px;
|
||
left: 25px;
|
||
text-shadow: 0.0em 0.0em 0.3em #808080;
|
||
}
|
||
/* links below resos */
|
||
|
||
.linkdetails {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.linkdetails aside {
|
||
margin: 0 4px;
|
||
width: 140px;
|
||
}
|
||
|
||
#toolbox {
|
||
padding: 4px;
|
||
font-size:90%;
|
||
}
|
||
|
||
#toolbox > a {
|
||
padding: 5px;
|
||
}
|
||
|
||
/* a common portal display takes this much space (prevents moving
|
||
* content when first selecting a portal) */
|
||
|
||
#portaldetails {
|
||
min-height: 553px;
|
||
}
|
||
|
||
|
||
/* update status */
|
||
#updatestatus {
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
border-bottom: 0;
|
||
border-top: 1px solid #20A8B1;
|
||
border-left: 1px solid #20A8B1;
|
||
bottom: 0;
|
||
color: #ffce00;
|
||
font-size:13px;
|
||
padding: 4px;
|
||
position: fixed;
|
||
right: 0;
|
||
z-index:3002;
|
||
}
|
||
|
||
|
||
/* preview */
|
||
|
||
#largepreview {
|
||
left: 50%;
|
||
position: fixed;
|
||
top: 50%;
|
||
z-index: 2000;
|
||
}
|
||
#largepreview img {
|
||
box-shadow: 0 0 40px #000;
|
||
}
|
||
#largepreview img {
|
||
border: 2px solid #f8ff5e;
|
||
}
|