Browse Source

Include category stylesheet via browserify-css

master
parent
commit
e1a0fab66b
  1. 5
      package.json
  2. 189
      src/category.css
  3. 1
      src/export.js
  4. 2
      src/index.js
  5. 188
      style.css

5
package.json

@ -27,13 +27,14 @@
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "browserify src/index.js -o dist/openstreetbrowser.js",
"watch": "watchify --debug src/index.js -o dist/openstreetbrowser.js -v",
"build": "browserify -g browserify-css src/index.js -o dist/openstreetbrowser.js",
"watch": "watchify --debug -g browserify-css src/index.js -o dist/openstreetbrowser.js -v",
"prepublish": "npm run build",
"lint": "standard src/*.js"
},
"devDependencies": {
"browserify": "^14.4.0",
"browserify-css": "^0.14.0",
"standard": "^10.0.2",
"watchify": "^3.9.0"
},

189
src/category.css

@ -0,0 +1,189 @@
.category {
position: relative;
}
.category > .loadingIndicator {
position: absolute;
right: 0;
top: 0;
font-size: 15px;
display: none;
}
.category.loading > .loadingIndicator {
padding-top: 2px;
display: block;
}
.category > .loadingIndicator2 {
display: none;
}
/* Source: http://tobiasahlin.com/spinkit/ */
.category.open.loading > .loadingIndicator2 {
text-align: left;
display: block;
background: #efefef;
padding-left: 40px;
}
.category.loading > .loadingIndicator2 > div {
width: 9px;
height: 9px;
margin-right: 9px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.category.loading > .loadingIndicator2 .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.category.loading > .loadingIndicator2 .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.category header {
padding-top: 3px;
border-bottom: 1px dotted #999;
user-select: none;
font-size: 15px;
}
.category header > a {
text-decoration: none;
color: black;
}
.category header > a:active,
.category header > a:hover {
text-decoration: underline;
}
.category header > a.reload {
float: right;
}
.category > .content,
.category > .tools,
.category > .status {
display: none;
}
.category.open > .content,
.category.open > .tools,
.category.open > .status {
display: block;
}
.category .info {
position: relative;
border: 1px solid black;
}
.category .info > .closeButton {
position: absolute;
top: 0;
right: 0;
text-decoration: none;
font-size: 12px;
}
.category > .status,
.category > .content > ul.overpass-layer-list {
padding-top: 3px;
background: #efefef;
}
.category > div > div> .category {
margin-left: 1em;
}
ul.overpass-layer-list {
margin-top: 0;
margin-bottom: 0;
}
ul.overpass-layer-list > li {
position: relative;
list-style: none;
min-height: 30px;
}
ul.overpass-layer-list > li > .markerParent {
position: absolute;
margin-left: -35px;
width: 30px;
height: 30px;
text-align: center;
display: block;
color: black;
text-decoration: none;
}
ul.overpass-layer-list > li > .markerParent > .marker {
}
.info > table > tr > td:first-of-type,
.info > table > tbody > tr > td:first-of-type {
position: relative;
}
.info .sign,
ul.overpass-layer-list > li > .markerParent > .icon {
text-align: center;
position: absolute;
top: 3px;
font-size: 15px;
left: 0;
right: 0;
z-index: 1;
display: inline-block;
}
ul.overpass-layer-list > li > a.title {
display: inline-block;
color: black;
text-decoration: none;
}
ul.overpass-layer-list > li > a.title:hover,
ul.overpass-layer-list > li > a.title:active {
text-decoration: underline;
}
ul.overpass-layer-list > li > div.description {
font-style: italic;
color: #707070;
float: right;
text-align: right;
}
ul.overpass-layer-list > li:after {
content: '';
display: table;
clear: both;
}
.leaflet-popup-content {
min-width: 300px;
max-height: 300px;
overflow: auto;
word-wrap: break-word;
}
.leaflet-popup-content:after {
content: ' ';
clear: both;
display: table;
}
.leaflet-popup-content pre {
font-size: 8px;
}
.overpass-layer-icon div {
position: relative;
top: -46px;
font-size: 15px;
width: 25px;
text-align: center;
}

1
src/export.js

@ -1,6 +1,7 @@
require('./twigFunctions')
require('./tagTranslations')
require('./markers')
require('./category.css')
module.exports = {
CategoryIndex: require('./CategoryIndex'),

2
src/index.js

@ -1,5 +1,7 @@
/* globals map:true, overpassFrontend:true, currentPath:true, options:true, baseCategory:true, overpassUrl:true */
require('./category.css')
var LeafletGeoSearch = require('leaflet-geosearch')
var OverpassFrontend = require('overpass-frontend')

188
style.css

@ -100,195 +100,7 @@ body {
#content > #contentList > .category > .content > .categoryWrapper > .category {
margin-left: 0;
}
#content .category {
position: relative;
}
#content .category > .loadingIndicator {
position: absolute;
right: 0;
top: 0;
font-size: 15px;
display: none;
}
#content .category.loading > .loadingIndicator {
padding-top: 2px;
display: block;
}
#content .category > .loadingIndicator2 {
display: none;
}
/* Source: http://tobiasahlin.com/spinkit/ */
#content .category.open.loading > .loadingIndicator2 {
text-align: left;
display: block;
background: #efefef;
padding-left: 40px;
}
#content .category.loading > .loadingIndicator2 > div {
width: 9px;
height: 9px;
margin-right: 9px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
#content .category.loading > .loadingIndicator2 .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#content .category.loading > .loadingIndicator2 .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
#content .category header {
padding-top: 3px;
border-bottom: 1px dotted #999;
user-select: none;
font-size: 15px;
}
#content .category header > a {
text-decoration: none;
color: black;
}
#content .category header > a:active,
#content .category header > a:hover {
text-decoration: underline;
}
#content .category header > a.reload {
float: right;
}
#content .category > .content,
#content .category > .tools,
#content .category > .status {
display: none;
}
#content .category.open > .content,
#content .category.open > .tools,
#content .category.open > .status {
display: block;
}
.info {
position: relative;
border: 1px solid black;
}
.info > .closeButton {
position: absolute;
top: 0;
right: 0;
text-decoration: none;
font-size: 12px;
}
#content .category > .status,
#content .category > .content > ul.overpass-layer-list {
padding-top: 3px;
background: #efefef;
}
#content .category > div > div> .category {
margin-left: 1em;
}
ul.overpass-layer-list {
margin-top: 0;
margin-bottom: 0;
}
ul.overpass-layer-list > li {
position: relative;
list-style: none;
min-height: 30px;
}
ul.overpass-layer-list > li > .markerParent {
position: absolute;
margin-left: -35px;
width: 30px;
height: 30px;
text-align: center;
display: block;
color: black;
text-decoration: none;
}
ul.overpass-layer-list > li > .markerParent > .marker {
}
.info > table > tr > td:first-of-type,
.info > table > tbody > tr > td:first-of-type {
position: relative;
}
.info .sign,
ul.overpass-layer-list > li > .markerParent > .icon {
text-align: center;
position: absolute;
top: 3px;
font-size: 15px;
left: 0;
right: 0;
z-index: 1;
display: inline-block;
}
ul.overpass-layer-list > li > a.title {
display: inline-block;
color: black;
text-decoration: none;
}
ul.overpass-layer-list > li > a.title:hover,
ul.overpass-layer-list > li > a.title:active {
text-decoration: underline;
}
ul.overpass-layer-list > li > div.description {
font-style: italic;
color: #707070;
float: right;
text-align: right;
}
ul.overpass-layer-list > li:after {
content: '';
display: table;
clear: both;
}
.leaflet-popup-content {
min-width: 300px;
max-height: 300px;
overflow: auto;
word-wrap: break-word;
}
.leaflet-popup-content:after {
content: ' ';
clear: both;
display: table;
}
.leaflet-popup-content pre {
font-size: 8px;
}
.overpass-layer-icon div {
position: relative;
top: -46px;
font-size: 15px;
width: 25px;
text-align: center;
}
#content a.showDetails {
display: none;
}

Loading…
Cancel
Save