#40 Added a sidebar. Split up the CSS in the map to a separate file. …

…The sidebar works, just needs some more styling. Not sure about the white, probably needs a softer color but the dark color was too dark. I'll have to experiment a bit more.
RaiderIO · Oct 30, 2018 · fb0debc · fb0debc
1 parent 9b3a34f
commit fb0debc
Show file tree

Hide file tree

Showing 4 changed files with 346 additions and 231 deletions.
diff --git a/resources/assets/css/custom.css b/resources/assets/css/custom.css
@@ -23,6 +23,12 @@
     width: 40px;
 }
 
+.header_container_rounded {
+    border: #444 1px solid;
+    border-radius: 10px !important;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+}
+
 .leaflet-container {
 
 }
@@ -56,230 +62,6 @@
     padding: 0.25em 0.9em;
 }
 
-/** LEAFLET */
-body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-html, body, #map, #app {
-    height: 100%;
-    width: 100%;
-}
-
-#map-controls {
-    height: 700px;
-}
-
-.map-scroll:before {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    content: '';
-    background: #00000061;
-    z-index: 999;
-}
-
-.map-scroll:after {
-    content: 'Use ctrl + scroll to zoom the map';
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    z-index: 999;
-    font-size: 34px;
-    color: #eaeaea;
-    text-align: center;
-}
-
-/* Remove square background and border around enemies, but leave editing drag squares alone */
-.leaflet-marker-icon.leaflet-div-icon:not(.leaflet-editing-icon):not(.leaflet-edit-marker-selected) {
-    border: none;
-    background-color: unset;
-}
-
-/** leaflet-marker-icon leaflet-div-icon leaflet-zoom-animated leaflet-interactive */
-/** leaflet-marker-icon leaflet-div-icon leaflet-editing-icon leaflet-touch-icon leaflet-zoom-animated leaflet-interactive leaflet-marker-draggable */
-
-.aggressive_enemy_icon,
-.neutral_enemy_icon,
-.unfriendly_enemy_icon,
-.friendly_enemy_icon,
-.unset_enemy_icon,
-.flagged_enemy_icon {
-    width: 11px;
-    height: 11px;
-}
-
-.boss_enemy_icon {
-    width: 32px;
-    height: 32px;
-}
-
-.enemy_aggressiveness_correction {
-    margin-top: -6px;
-}
-
-.modifier {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-}
-
-.modifier_0 {
-    top: -19px;
-    left: -20px;
-    /* background-color: red; */
-}
-
-.modifier_1 {
-    top: -22px;
-    left: -3px;
-    /* background-color: green; */
-}
-
-.modifier_2 {
-    top: -19px;
-    left: 14px;
-    /* background-color: blue; */
-}
-
-.modifier_0_boss {
-    left: -9px;
-}
-
-.modifier_1_boss {
-    left: 8px;
-}
-
-.modifier_2_boss {
-    left: 25px;
-}
-
-.modifier_infested_vote {
-    color: black;
-    background-color: #fffb;
-    border-radius: 20px;
-    cursor: pointer;
-}
-
-.modifier_infested_vote_disabled {
-    background-color: #888b;
-    cursor: not-allowed;
-}
-
-.modifier_infested_enabled {
-    background-color: rgba(72, 166, 72, 0.5);
-    border-radius: 20px;
-}
-
-.modifier_infested_disabled {
-    background-color: rgba(166, 71, 71, 0.5);
-    border-radius: 20px;
-}
-
-.modifier_infested_vote:hover {
-    background-color: #ffa500bb;
-}
-
-.badge_enemy_forces {
-    font-size: 100%;
-    margin-left: -4px;
-    background-color: #00f8;
-}
-
-.col-3-5 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 29.1%;
-    flex: 0 0 29.1%;
-    max-width: 29.1%;
-}
-
-.aggressive_enemy_icon {
-    background: url("/images/mapicon/aggressive.png") no-repeat center !important;
-}
-
-.neutral_enemy_icon {
-    background: url("/images/mapicon/neutral.png") no-repeat center !important;
-}
-
-.unfriendly_enemy_icon {
-    background: url("/images/mapicon/unfriendly.png") no-repeat center !important;
-}
-
-.friendly_enemy_icon {
-    background: url("/images/mapicon/friendly.png") no-repeat center !important;
-}
-
-.boss_enemy_icon {
-    background: url("/images/mapicon/boss.png") no-repeat center !important;
-}
-
-.unset_enemy_icon {
-    background: url("/images/mapicon/unset.png") no-repeat center !important;
-}
-
-.flagged_enemy_icon {
-    background: url("/images/mapicon/neutral.png") no-repeat center !important;
-}
-
-.door_icon {
-    background: url("/images/mapicon/door.png") no-repeat center !important;
-}
-
-.killzone_icon_big {
-    margin-left: -19px !important;
-    margin-top: -19px !important;
-    border-color: yellow !important;
-}
-
-.killzone_enemy_icon_small {
-    margin-top: -4px !important;
-    margin-left: -4px !important;
-}
-
-.killzone_enemy_icon_medium {
-    margin-top: -4px !important;
-    margin-left: -4px !important;
-}
-
-.killzone_enemy_icon_big {
-    margin-top: -4px !important;
-    margin-left: -4px !important;
-}
-
-#map_enemy_visuals,
-#map_enemy_forces {
-    color: black;
-    background-color: #fff;
-    border: 2px solid rgba(0, 0, 0, 0.2);
-    background-clip: padding-box;
-    border-radius: 4px;
-    padding: 6px;
-    z-index: 1000;
-}
-
-#map_enemy_visuals {
-    width: 200px;
-}
-
-.map_enemy_forces_too_much {
-    color: red;
-}
-
-.map_enemy_forces_too_much_warning {
-    color: orange;
-}
-
-.map_route_edit_popup_class_color {
-    height: 32px;
-    margin: 2px 10px;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
 /** GENERAL ICONS */
 .username_menu {
     width: 105px;