fixed #814 : cleaned up the viewer css

web/client/components/TOC/TOC.jsx

@@ -8,8 +8,8 @@
 
 var React = require('react');
 var Sortable = require('react-sortable-items');
-
-var TOC = React.createClass({
+require('./css/toc.css');
+const TOC = React.createClass({
     propTypes: {
         filter: React.PropTypes.func,
         nodes: React.PropTypes.array,

web/client/components/TOC/css/toc.css

@@ -0,0 +1,31 @@
+.Sortable {
+  position: relative;
+  display: block;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.SortableItem {
+  cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
+}
+
+.SortableItem.is-dragging {
+  cursor: move;
+  position: absolute;
+  z-index: 1688;
+  background-color: rgba(218, 218, 218, 0.8);;
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
+}
+
+.SortableItem.is-placeholder {
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+}
+
+.SortableItem.is-undraggable {
+  cursor: not-allowed;
+}

web/client/components/TOC/fragments/SettingsModal.jsx

@@ -9,7 +9,7 @@
 const React = require('react');
 const {Modal, Button, Glyphicon, Tabs, Tab} = require('react-bootstrap');
 
-require("./settingsModal.css");
+require("./css/settingsModal.css");
 
 const Dialog = require('../../misc/Dialog');
 const ConfirmButton = require('../../buttons/ConfirmButton');

web/client/components/TOC/fragments/css/groupchildren.css

@@ -1,3 +1,35 @@
 .toc-group-children {
     margin-left: 15px;
 }
+
+.Sortable {
+  position: relative;
+  display: block;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.SortableItem {
+  cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
+}
+
+.SortableItem.is-dragging {
+  cursor: move;
+  position: absolute;
+  z-index: 1688;
+  background-color: rgba(218, 218, 218, 0.8);;
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
+}
+
+.SortableItem.is-placeholder {
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+}
+
+.SortableItem.is-undraggable {
+  cursor: not-allowed;
+}

web/client/components/TOC/fragments/settingsModal.css → web/client/components/TOC/fragments/css/settingsModal.css

@@ -274,3 +274,71 @@
 .noUi-marker-vertical.noUi-marker-large {
   width: 15px;
 }
+
+
+
+#mapstore-layer-settings {
+    min-width: 400px;
+}
+
+#mapstore-layer-settings .noUi-background {
+    background:#CCC;
+}
+
+#mapstore-layer-settings .noUi-horizontal {
+    height: 2px;
+	width: 260px;
+	margin:auto;
+}
+#mapstore-layer-settings .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+#mapstore-layer-settings .noUi-base {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+#mapstore-layer-settings .noUi-horizontal .noUi-handle {
+    width: 23px;
+    height: 23px;
+    top: -10px;
+}
+
+#mapstore-layer-settings .noUi-handle {
+    background: #078AA3;
+    cursor: default;
+	border-radius:50px;
+}
+
+#mapstore-layer-settings .noUi-handle {
+    position: relative;
+    z-index: 1;
+}
+#mapstore-layer-settings .noUi-target, .noUi-target * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#mapstore-layer-settings .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+#mapstore-layer-settings .noUi-target {
+    width: 94%;
+    margin-bottom: 10px;
+}
+
+#mapstore-layer-settings .noUi-handle:before, #mapstore-layer-settings .noUi-handle:after {
+    background: none;
+}

web/client/components/buttons/InfoButton.jsx

@@ -12,7 +12,7 @@ var Button = BootstrapReact.Button;
 var Glyphicon = BootstrapReact.Glyphicon;
 var ImageButton = require('./ImageButton');
 const Dialog = require('../misc/Dialog');
-
+require('./css/infoButton.css');
 const assign = require('object-assign');
 /**
  * A button to show a simple information window.
@@ -29,7 +29,7 @@ const assign = require('object-assign');
  *
  * Note: the button will not be never empty, it will show at least the text (default or custom)
  */
-var InfoButton = React.createClass({
+const InfoButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         image: React.PropTypes.string,

web/client/components/buttons/css/infoButton.css

@@ -0,0 +1,6 @@
+#mapstore-about {
+    position: fixed;
+    top: 0;
+    left: calc(50% - 500px);
+    width: 500px;
+}

web/client/components/data/identify/Identify.jsx

@@ -9,6 +9,8 @@
 const React = require('react');
 const {Panel, Glyphicon} = require('react-bootstrap');
 
+require('./css/identify.css');
+
 const Draggable = require('react-draggable');
 
 const MapInfoUtils = require('../../../utils/MapInfoUtils');

web/client/components/data/identify/SwipeHeader.jsx

@@ -9,6 +9,7 @@
 const React = require('react');
 
 const {Glyphicon, Button} = require('react-bootstrap');
+require('./css/swipeHeader.css');
 
 const SwipeHeader = React.createClass({
     propTypes: {

web/client/components/data/identify/css/identify.css

@@ -0,0 +1,45 @@
+
+#mapstore-identify-revgeocoder {
+    min-height: 40px;
+    margin-bottom: 10px;
+    border-bottom: solid 1px #BBB;
+}
+
+
+#mapstore-getfeatureinfo {
+    max-width: 100%;
+}
+
+@media (min-width: 500px) {
+    #mapstore-getfeatureinfo {
+        min-width: 500px !important;
+    }
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading {
+    background-color: white;
+    border: none;
+    height: 60px;
+    padding: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel {
+    border: none;
+}
+
+#mapstore-getfeatureinfo .modal-body .panel-body {
+    padding: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-left-button {
+    right: 55px;
+    top: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-right-button {
+    top: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-title {
+    font-weight: bold;
+}

web/client/components/data/identify/css/swipeHeader.css

@@ -0,0 +1,14 @@
+
+.swipe-header-left-button {
+    float: none !important;
+    right: 45px;
+    top: 4px;
+    position: absolute;
+}
+
+.swipe-header-right-button {
+    float: none !important;
+    position: absolute;
+    top: 4px;
+    right: 5px;
+}

web/client/components/help/help.css

@@ -31,3 +31,34 @@
     top: 10px;
     z-index: 100000
 }
+
+
+.btn .badge {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+}
+
+.themed .btn .badge {
+    top: -35px;
+    left: -50px;
+}
+
+.badge {
+    cursor: pointer;
+}
+
+#helpbadge-scaleBox {
+    left: 0 !important;
+    background-color: #078aa3;
+    color: #ffffff;
+}
+
+#mapstore-navbar #helpbadge-search-help {
+    position: absolute;
+    left: -10px;
+    bottom: -8px;
+    z-index: 1;
+    background-color: #078aa3;
+    color: #ffffff;
+}

web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx

@@ -9,7 +9,8 @@
 const React = require('react');
 const {Button, Col, Grid, Row, Image, Glyphicon, Table, Panel} = require('react-bootstrap');
 const {DateFormat} = require('../../I18N/I18N');
-require("./style.css");
+require("./css/snapshot.css");
+
 const ConfigUtils = require('../../../utils/ConfigUtils');
 const shotingImg = require('./shoting.gif');
 const notAvailable = require('./not-available.png');

web/client/components/mapcontrols/Snapshot/SnapshotQueue.jsx

@@ -8,7 +8,7 @@
 
 const React = require('react');
 
-require("./style.css");
+require("./css/snapshot.css");
 
 
 let SnapshotSupport;

web/client/components/mapcontrols/Snapshot/style.css → web/client/components/mapcontrols/Snapshot/css/snapshot.css

@@ -5,3 +5,9 @@
     list-style:none;
     padding-left:0;
 }
+
+#mapstore-snapshot-panel {
+    position: absolute;
+    right: 200px;
+    min-width: 725px;
+}

web/client/components/mapcontrols/locate/LocateBtn.jsx

@@ -9,11 +9,11 @@
 var React = require('react');
 var {Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
 const defaultIcon = require('../../misc/spinners/InlineSpinner/img/spinner.gif');
-
+require('./css/locate.css');
 let checkingGeoLocation = false;
 let geoLocationAllowed = false;
 
-var LocateBtn = React.createClass({
+const LocateBtn = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         btnConfig: React.PropTypes.object,

web/client/components/mapcontrols/locate/css/locate.css

@@ -0,0 +1,3 @@
+#navigationBar #locate-btn {
+    position: static;
+}