Commit 3cbeb1cf authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Added prefix to CSS classes (closes #64)

parent a93a4d1d
......@@ -24,13 +24,13 @@
*/
/** Common style **/
.feature-label {
.olu-feature-label {
text-align: center;
margin-top: -1em;
font-size: 0.8em;
}
.feature-label div {
.olu-feature-label div {
position: relative;
text-align: center;
left: -50%;
......
......@@ -19,12 +19,12 @@
* Styles for OLU.view.Level
*/
.level-control-container {
.olu-level-control-container {
/*background-color: #fff;*/
}
/** Scrollable levels container **/
.level-control-levels {
.olu-level-control-levels {
position: relative;
overflow: hidden;
border-bottom: 1px solid #ccc;
......@@ -42,18 +42,18 @@
}
/** Current level button **/
.level-control-button-lvl-current {
.olu-level-control-button-lvl-current {
background-color: rgb(12, 64, 167) !important;
}
/** Override first button **/
.leaflet-bar .level-control-levels a:first-child {
.leaflet-bar .olu-level-control-levels > a:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/** Override last button **/
.leaflet-bar .level-control-levels a:last-child {
.leaflet-bar .olu-level-control-levels > a:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -115,8 +115,8 @@ a.osm-editor:hover {
.leaflet-right .leaflet-control-layers a,
.leaflet-right .leaflet-bar button,
.leaflet-right .leaflet-bar button:hover,
.leaflet-right .leaflet-bar.level-control-container-full .level-control-levels a:first-child,
.leaflet-right .leaflet-bar.level-control-container-full .level-control-levels a:last-child {
.leaflet-right .leaflet-bar.olu-level-control-container-full .olu-level-control-levels a:first-child,
.leaflet-right .leaflet-bar.olu-level-control-container-full .olu-level-control-levels a:last-child {
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
}
......@@ -127,8 +127,8 @@ a.osm-editor:hover {
.leaflet-left .leaflet-bar button,
.leaflet-left .leaflet-bar button:hover,
.leaflet-left .leaflet-control-olu-messages,
.leaflet-right .leaflet-bar.level-control-container-full .level-control-levels a:first-child,
.leaflet-right .leaflet-bar.level-control-container-full .level-control-levels a:last-child,
.leaflet-right .leaflet-bar.olu-level-control-container-full .olu-level-control-levels a:first-child,
.leaflet-right .leaflet-bar.olu-level-control-container-full .olu-level-control-levels a:last-child,
.leaflet-right .leaflet-control-edit-in-osm a {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
......@@ -165,7 +165,7 @@ a.osm-editor:hover {
color: #fff;
}
.level-control-levels {
.olu-level-control-levels {
border-bottom: none;
}
......
......@@ -36,28 +36,28 @@
/*
* Buttons
*/
.side-content button {
.olu-side-content button {
border: 1px solid #aaa;
border-radius: 5px;
padding: 3px;
cursor: pointer;
}
.side-content button.success {
.olu-side-content button.olu-success {
background-color: rgb(46, 204, 113);
border-color: #26A65B;
}
.side-content button.success:hover {
.olu-side-content button.olu-success:hover {
background-color: #8FE0B1;
}
.side-content button.warning {
.olu-side-content button.olu-warning {
background-color: rgb(244, 179, 80);
border-color: #F89406;
}
.side-content button.warning:hover {
.olu-side-content button.olu-warning:hover {
background-color: #FFDBA4;
}
......@@ -65,20 +65,20 @@
/*
* Full width input
*/
.side-content .input-field {
.olu-side-content .olu-input-field {
display: table;
border-collapse: separate;
width: 100%;
position: relative;
}
.side-content .input-field > * {
.olu-side-content .olu-input-field > * {
display: table-cell;
box-sizing: border-box;
border-collapse: separate;
}
.side-content .input-field input {
.olu-side-content .olu-input-field input {
position: relative;
z-index: 2;
float: left;
......@@ -86,9 +86,9 @@
margin-bottom: 0;
}
.side-content .input-field span.btn {
.olu-side-content .olu-input-field span.olu-btn {
position: relative;
font-size: 0;
font-size: 1em;
white-space: nowrap;
width: 1%;
vertical-align: middle;
......@@ -96,7 +96,7 @@
border-top-left-radius: 0;
}
.side-content .input-field span.btn button {
.olu-side-content .olu-input-field span.olu-btn button {
z-index: 2;
position: relative;
display: inline-block;
......
......@@ -22,11 +22,11 @@
/*
* General
*/
.side-content-feature-title h2 {
.olu-side-content-feature-title h2 {
margin-bottom: 0;
}
.side-content-feature-title span {
.olu-side-content-feature-title span {
font-size: 1.03em;
}
......@@ -34,7 +34,7 @@
/*
* Pictures
*/
.side-content-feature-pictures {
.olu-side-content-feature-pictures {
width: 100%;
height: 250px;
background-color: black;
......@@ -42,8 +42,8 @@
position: relative;
}
.side-content-feature-pictures div.next,
.side-content-feature-pictures div.prev {
.olu-side-content-feature-pictures div.olu-next,
.olu-side-content-feature-pictures div.olu-prev {
color: #fff;
text-shadow: 0 0 1px #000;
font-size: 1.8em;
......@@ -56,42 +56,42 @@
z-index: 100;
}
.side-content-feature-pictures div.next:hover,
.side-content-feature-pictures div.prev:hover {
.olu-side-content-feature-pictures div.olu-next:hover,
.olu-side-content-feature-pictures div.olu-prev:hover {
color: #ccc;
}
.side-content-feature-pictures div.next span,
.side-content-feature-pictures div.prev span {
.olu-side-content-feature-pictures div.olu-next span,
.olu-side-content-feature-pictures div.olu-prev span {
display: table-cell;
vertical-align: middle;
}
.side-content-feature-pictures div.next {
.olu-side-content-feature-pictures div.olu-next {
right: 0;
}
.side-content-feature-pictures div.prev {
.olu-side-content-feature-pictures div.olu-prev {
left: 0;
}
.side-content-feature-picture {
.olu-side-content-feature-picture {
width: 100%;
height: 100%;
}
.side-content-feature-picture.basic {
.olu-side-content-feature-picture.basic {
text-align: center;
}
.side-content-feature-picture.basic img {
.olu-side-content-feature-picture.basic img {
height: 100%;
max-width: 100% !important;
display: inline-block;
vertical-align: middle;
}
#side-content-feature-picture-mapillary-viewer {
#olu-side-content-feature-picture-mapillary-viewer {
width: 100%;
height: 100%;
}
......@@ -100,44 +100,44 @@
/*
* Details
*/
.side-content-feature-details {
.olu-side-content-feature-details {
width: 100%;
margin-top: 10px;
}
.side-content-feature-details > div {
.olu-side-content-feature-details > div {
border-top: 1px solid white;
display: table;
width: 100%;
padding-top: 10px;
}
.side-content-feature-details > div:first-child {
.olu-side-content-feature-details > div:first-child {
border-top: none;
}
.side-content-feature-detail {
.olu-side-content-feature-detail {
display: table-row;
}
.side-content-feature-detail .key,
.side-content-feature-detail .value {
.olu-side-content-feature-detail .olu-key,
.olu-side-content-feature-detail .olu-value {
display: table-cell;
}
.side-content-feature-detail .key {
.olu-side-content-feature-detail .olu-key {
width: 20px;
padding: 0px 10px 15px 5px;
text-align: center;
}
.side-content-feature-detail .key img {
.olu-side-content-feature-detail .olu-key img {
height: 20px;
max-width: 20px;
vertical-align: middle;
}
.side-content-feature-detail .value a {
.olu-side-content-feature-detail .olu-value a {
text-decoration: none;
}
......@@ -145,24 +145,24 @@
/*
* Tags
*/
.side-content-feature-tags {
.olu-side-content-feature-tags {
border-top: 1px solid white;
width: 100%;
margin: 10px 0;
}
.side-content-feature-tags h3 {
.olu-side-content-feature-tags h3 {
margin: 10px 0;
}
.side-content-feature-tags table {
.olu-side-content-feature-tags table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.side-content-feature-tags table tr th,
.side-content-feature-tags table tr td {
.olu-side-content-feature-tags table tr th,
.olu-side-content-feature-tags table tr td {
white-space: normal;
word-break: break-all;
word-wrap: break-word;
......@@ -173,10 +173,10 @@
color: white;
}
.side-content-feature-tags table tr th {
.olu-side-content-feature-tags table tr th {
background-color: rgb(12, 64, 167);
}
.side-content-feature-tags table tr a {
.olu-side-content-feature-tags table tr a {
text-decoration: none;
}
......@@ -22,7 +22,7 @@
/*
* Layers buttons
*/
.side-content-layers-button {
.olu-side-content-layers-button {
height: 50px;
border: 3px solid #08296B;
border-radius: 5px;
......@@ -34,23 +34,23 @@
overflow: hidden;
}
.side-content-layers-button:hover {
.olu-side-content-layers-button:hover {
border-color: #85A4E3;
background-color: rgba(255,255,255,0.3) !important;
}
.side-content-layers-button.selected {
.olu-side-content-layers-button.selected {
border-color: #51A74C;
}
/*
* Map styles buttons
*/
.side-content-layers-button.style {
.olu-side-content-layers-button.style {
background-color: rgba(255,255,255,0.2);
}
.side-content-layers-button.style img {
.olu-side-content-layers-button.style img {
vertical-align: middle;
height: 30px;
max-width: 30px;
......@@ -60,11 +60,11 @@
/*
* Base layers buttons
*/
.side-content-layers-button.base {
.olu-side-content-layers-button.base {
height: 70px;
}
.side-content-layers-button.base img {
.olu-side-content-layers-button.base img {
display: block;
position: absolute;
width: 100%;
......@@ -73,7 +73,7 @@
min-width: 256px;
}
.side-content-layers-button.base span {
.olu-side-content-layers-button.base span {
background-color: rgba(255,255,255,0.9);
color: #555;
padding: 5px 8px;
......
......@@ -19,35 +19,35 @@
* Styles for OLU.view.sidecontent.NewNote
*/
#sidecontent-newnote-textarea {
#olu-sidecontent-newnote-textarea {
width: 100%;
height: 200px;
box-sizing: border-box;
}
.sidecontent-newnote-buttons {
.olu-sidecontent-newnote-buttons {
width: 100%;
display: table;
}
.sidecontent-newnote-buttons-row {
.olu-sidecontent-newnote-buttons-row {
display: table-row;
}
.sidecontent-newnote-button {
.olu-sidecontent-newnote-button {
display: table-cell;
width: 50%;
padding: 0 2px;
}
.sidecontent-newnote-button:first-child {
.olu-sidecontent-newnote-button:first-child {
padding-left: 0;
}
.sidecontent-newnote-button:last-child {
.olu-sidecontent-newnote-button:last-child {
padding-right: 0;
}
.sidecontent-newnote-button button {
.olu-sidecontent-newnote-button button {
width: 100%;
}
......@@ -19,29 +19,29 @@
* Styles for OLU.view.sidecontent.Notes
*/
ul.note-comments {
ul.olu-note-comments {
list-style: none;
padding: 0;
}
ul.note-comments > li {
ul.olu-note-comments > li {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
span.comment {
span.olu-comment {
display: block;
margin-bottom: 5px;
}
span.comment-details {
span.olu-comment-details {
display: block;
text-align: right;
color: #bbb;
font-size: 0.9em;
}
p.note-footer {
p.olu-note-footer {
text-align: center;
}
......@@ -19,36 +19,36 @@
* Styles for OLU.view.sidecontent.Search
*/
.sidecontent-search-area {
.olu-sidecontent-search-area {
width: 100%;
position: relative;
}
#sidecontent-search-results ul {
#olu-sidecontent-search-results ul {
list-style: none;
padding: 0;
}
#sidecontent-search-results ul li {
#olu-sidecontent-search-results ul li {
border-bottom: 1px solid white;
padding: 5px 10px;
cursor: pointer;
}
#sidecontent-search-results ul li:hover {
#olu-sidecontent-search-results ul li:hover {
background-color: #4183D7;
color: #C5EFF7;
}
#sidecontent-search-results ul li:last-child {
#olu-sidecontent-search-results ul li:last-child {
border-bottom: none;
}
#sidecontent-search-results ul li .result-name {
#olu-sidecontent-search-results ul li .olu-result-name {
display: block;
}
#sidecontent-search-results ul li .result-type {
#olu-sidecontent-search-results ul li .olu-result-type {
display: block;
color: #bbb;
font-size: 0.9em;
......
......@@ -51,7 +51,7 @@ var Level = L.Control.extend({
setCurrent: function(l, b) {
b = (b === undefined) ? true : b;
var previousLevel = this.level;
var btnHeight = $(".level-control-button:first").height();
var btnHeight = $(".olu-level-control-button:first").height();
this.level = l;
//Fire event
......@@ -60,15 +60,15 @@ var Level = L.Control.extend({
}
//Update buttons
$(".level-control-button-lvl-current").removeClass("level-control-button-lvl-current");
$(".level-control-button-lvl"+this.options.levels.indexOf(l)).addClass("level-control-button-lvl-current");
$(".olu-level-control-button-lvl-current").removeClass("olu-level-control-button-lvl-current");
$(".olu-level-control-button-lvl"+this.options.levels.indexOf(l)).addClass("olu-level-control-button-lvl-current");
//Set scroll in order to see level if not already visible
var levelScroll = (this.options.levels.length - 1 - this.options.levels.indexOf(l)) * btnHeight;
this.scrolled = levelScroll;
if($(".level-control-levels").scrollTop() > levelScroll || levelScroll > $(".level-control-levels").scrollTop() + (this.options.visibleButtons -0.5) * btnHeight) {
$(".level-control-levels").animate(
if($(".olu-level-control-levels").scrollTop() > levelScroll || levelScroll > $(".olu-level-control-levels").scrollTop() + (this.options.visibleButtons -0.5) * btnHeight) {
$(".olu-level-control-levels").animate(
{
scrollTop: levelScroll
},
......@@ -83,7 +83,7 @@ var Level = L.Control.extend({
onAdd: function (map) {
this.map = map;
this.container = L.DomUtil.create('div', 'level-control-container leaflet-control leaflet-bar');
this.container = L.DomUtil.create('div', 'olu-level-control-container leaflet-control leaflet-bar');
this._initContainer();
L.DomEvent.disableClickPropagation(this.container);
return this.container;
......@@ -97,27 +97,27 @@ var Level = L.Control.extend({
action = (action == "start" || action == "continue" || action == "stop") ? action : undefined;
if(
(direction == "up" && !$(".level-control-scroll-up").hasClass("leaflet-disabled"))
|| (direction == "down" && !$(".level-control-scroll-down").hasClass("leaflet-disabled"))
(direction == "up" && !$(".olu-level-control-scroll-up").hasClass("leaflet-disabled"))
|| (direction == "down" && !$(".olu-level-control-scroll-down").hasClass("leaflet-disabled"))
) {
//console.log(direction+" "+action);
if(action == "start" || (action == "continue" && this._canScroll) || action == undefined) {
var scrollAmount = (action == "start" || action == "continue") ? 10 : $(".level-control-button:first").height() * 3;
var scrollAmount = (action == "start" || action == "continue") ? 10 : $(".olu-level-control-button:first").height() * 3;
if(action == "start") {
this._canScroll = true;
}
if(action == "start" || action == undefined) {
this.scrolled = $(".level-control-levels").scrollTop();
this.scrolled = $(".olu-level-control-levels").scrollTop();
}
//Set scroll value
this.scrolled = (direction == "up") ? this.scrolled - scrollAmount : this.scrolled + scrollAmount;
if(this.scrolled < 0) { this.scrolled = 0; }
else if(this.scrolled > $(".level-control-levels")[0].scrollHeight) { this.scrolled = $(".level-control-levels")[0].scrollHeight; }
else if(this.scrolled > $(".olu-level-control-levels")[0].scrollHeight) { this.scrolled = $(".olu-level-control-levels")[0].scrollHeight; }
//Go to scroll
$(".level-control-levels").animate(
$(".olu-level-control-levels").animate(
{
scrollTop: this.scrolled
},
......@@ -139,23 +139,23 @@ var Level = L.Control.extend({
//If too many levels
if(btnOverflow) {
$(this.container).addClass("level-control-container-full");
var btnUp = this._createButton("", this.options.t("map.level.up.desc"), 'level-control-scroll-up', this.container, this._scroll.bind(this, "up"));
$(this.container).addClass("olu-level-control-container-full");
var btnUp = this._createButton("", this.options.t("map.level.up.desc"), 'olu-level-control-scroll-up', this.container, this._scroll.bind(this, "up"));
if(!util.isMobileBrowser()) {
L.DomEvent.on(btnUp, 'mouseover', this._scroll.bind(this, "up", "start"));
L.DomEvent.on(btnUp, 'mouseout', this._scroll.bind(this, "up", "stop"));
}
//Levels
var levelsButtonsHeight = $(".level-control-scroll-up:first").height() * ((btnOverflow) ? this.options.visibleButtons : this.options.levels.length);
var levelsButtonsHeight = $(".olu-level-control-scroll-up:first").height() * ((btnOverflow) ? this.options.visibleButtons : this.options.levels.length);
var levelsContainer = L.DomUtil.create('div', 'level-control-levels', this.container);
var levelsContainer = L.DomUtil.create('div', 'olu-level-control-levels', this.container);
$(levelsContainer).css('height', levelsButtonsHeight);
$(levelsContainer).css('line-height', levelsButtonsHeight);
this._createLevels(levelsContainer);