Fix design features
Add wordpress template files to angular.json
1
.gitignore
vendored
@ -34,6 +34,7 @@ npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
/src/environments/environment.*.ts
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
|
@ -19,7 +19,11 @@
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
"src/favicon.ico",
|
||||
"src/index.php",
|
||||
"src/functions.php",
|
||||
"src/screenshot.png",
|
||||
"src/style.css"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
|
@ -4,17 +4,19 @@ map-box {margin:0;}
|
||||
div.title {position:absolute;z-index:10;}
|
||||
div.title {font-size:1em;text-align:left;padding:10px;position:absolute;bottom:0;left:0;width:30vw;background-color:rgba(0,0,0,0);color:#fff;}
|
||||
div.title h1 {font-family:"Open Sans";font-size:4em;width:30vw;}
|
||||
div.title h1 span {background:#d52b1e;padding:0 10px;}
|
||||
div.title h1 span {background:#0090C8;padding:0 10px;}
|
||||
div.title h2 span {background:#fff;padding:2px;color:#000;cursor:pointer;background-color:#333;padding:5px 15px;margin:0 5px;}
|
||||
div.title p span {line-height:1.4;background:#021011;}
|
||||
|
||||
div.title h3 {position:absolute;max-width:50vw;}
|
||||
div.title h3 span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;}
|
||||
div.title h3 span.tablet-term { background:#0090C8;color:#fff; padding:2px 10px;}
|
||||
div.title h3 span.tablet-term b {font-weight:bold;cursor:pointer;}
|
||||
div.title h3 span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
|
||||
|
||||
div.logo-header {position:absolute;top:0;left:0;z-index:2;padding:10px;}
|
||||
div.logo-header img { max-width:225px;width:}
|
||||
@media screen and (max-device-width: 720px) {
|
||||
div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;padding-bottom:30px;}
|
||||
div.title {position:relative;width:100vw;padding:10px 0; background:#0090C8;padding-bottom:30px;}
|
||||
div.title h2 {display:inline-block;}
|
||||
div.title h2 span {float:left;width:100%;text-align:center;margin:auto;background:none;}
|
||||
div.title h2 span a {background:transparent;}
|
||||
|
@ -1,3 +1,4 @@
|
||||
<div class="logo-header"><img src="http://ticinosoundmap.supsi.ch/wp-content/uploads/2021/02/logo-SUPSI_nero.png"></div>
|
||||
<div class="title">
|
||||
<h3 class="title-filter" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
|
||||
<h1><span>Ticino</span> <span>Soundmap</span></h1>
|
||||
|
@ -18,6 +18,7 @@ export class MapBoxComponent implements OnInit {
|
||||
map: mapboxgl.Map;
|
||||
// style = 'mapbox://styles/mapbox/satellite-streets-v9';
|
||||
//style = 'mapbox://styles/lrullo/cjonkoeiu3hrk2rqstkofqku9';
|
||||
//style = 'mapbox://styles/lrullo/cjplquc7x0eil2qo95qhxtq80';
|
||||
style = 'mapbox://styles/lrullo/cjplquc7x0eil2qo95qhxtq80';
|
||||
//chiasso 45.8289397,8.9803456
|
||||
public lat = 46.238752301105706;
|
||||
@ -133,7 +134,7 @@ export class MapBoxComponent implements OnInit {
|
||||
'text-transform':'lowercase',
|
||||
},
|
||||
paint: {
|
||||
// 'text-halo-color':"#d52b1e",
|
||||
// 'text-halo-color':"#0090C8",
|
||||
// 'text-halo-width':20,
|
||||
'text-halo-width': ["case",
|
||||
["boolean", ["feature-state", "hover"], false],
|
||||
@ -149,7 +150,7 @@ export class MapBoxComponent implements OnInit {
|
||||
'text-halo-color':["case",
|
||||
["boolean", ["feature-state", "hover"], false],
|
||||
"#000",
|
||||
"#d52b1e"
|
||||
"#0090C8"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
@ -1,5 +1,5 @@
|
||||
div.container {background-color:#d52b1e;}
|
||||
div.page-container {min-height:100vh; background-color:#d52b1e;padding-top:15px;position:relative;clear:both;}
|
||||
div.container {background-color:#0090C8;}
|
||||
div.page-container {min-height:100vh; background-color:#0090C8;padding-top:15px;position:relative;clear:both;}
|
||||
div.page-container h1 {font-family:"Raleway"; font-size:2.5rem;font-weight:bold;color:#fff; padding:0;border:5px solid #fff;width:80%;text-align:center;margin:15px 15px;}
|
||||
|
||||
div.page-container div.col-left { text-align:center; min-height:100vh; position:relative;float:left;width:45%;max-width:500px;min-width:320px;}
|
||||
@ -21,8 +21,8 @@ footer div.info-footer {max-width:1000px;font-size:0.8rem;text-align:center;marg
|
||||
/* media query */
|
||||
@media screen and (max-device-width: 720px) {
|
||||
div.page-container div.col-left {margin:auto; width:100%;width:100%; min-height:0;clear:both;min-width:0;}
|
||||
div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;clear:both;min-width:0;}
|
||||
div.page-container div.col-right {background-color:#0090C8;margin:auto; width:100%;clear:both;min-width:0;}
|
||||
div.page-container h1 {min-width:0;width:100%;height:80%;margin:auto;padding:0;text-align:center;}
|
||||
div.page-container {padding:0 20px;}
|
||||
div.container-map-pages {background-color:#d52b1e;padding-top:0;}
|
||||
div.container-map-pages {background-color:#0090C8;padding-top:0;}
|
||||
}
|
||||
|
@ -3,4 +3,4 @@ ul.tags li
|
||||
{ cursor:pointer; transition:0.3s; }
|
||||
|
||||
ul.categories li:hover,
|
||||
ul.tags li:hover { color:#d52b1e; font-weight: bold; background:#fff;}
|
||||
ul.tags li:hover { color:#0090C8; font-weight: bold; background:#fff;}
|
||||
|
8
src/assets/functions.php
Normal file
@ -0,0 +1,8 @@
|
||||
<?php
|
||||
/* wordpress theme functions */
|
||||
function mytheme_post_thumbnails() {
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
}
|
||||
add_action( 'after_setup_theme', 'mytheme_post_thumbnails' );
|
||||
?>
|
||||
|
1
src/assets/index.php
Normal file
@ -0,0 +1 @@
|
||||
<?php require get_template_directory()."/index.html"; ?>
|
BIN
src/assets/logo-SUPSI_nero.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/screenshot.png
Normal file
After Width: | Height: | Size: 955 KiB |
@ -1,6 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
@ -17,7 +15,7 @@
|
||||
xml:space="preserve"
|
||||
id="svg5045"
|
||||
sodipodi:docname="sound-marker.svg"
|
||||
inkscape:version="0.92.1 r15371"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
width="10mm"
|
||||
height="10mm"><defs
|
||||
id="defs5049"><filter
|
||||
@ -39,8 +37,8 @@
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="734"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1046"
|
||||
id="namedview5047"
|
||||
showgrid="false"
|
||||
inkscape:zoom="7.5685191"
|
||||
@ -54,58 +52,58 @@
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
units="mm" /><metadata
|
||||
units="mm"
|
||||
inkscape:document-rotation="0" /><metadata
|
||||
id="metadata5023"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g
|
||||
id="g5299"
|
||||
transform="translate(0,-2)"><g
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><g
|
||||
id="g871"><g
|
||||
style="fill:#b3b3b3;filter:url(#filter5205)"
|
||||
id="g4571"
|
||||
transform="matrix(0.45172907,-0.01429504,0.05743541,0.11243039,5.6582825,29.575389)"><path
|
||||
transform="matrix(0.45172907,-0.01429504,0.05743541,0.11243039,5.6582825,27.575389)"><path
|
||||
id="path4549"
|
||||
d="m 25,0.71289062 c -54.622627,0 0,66.34179738 0,66.34179738 0,0 54.622625,-66.34179738 0,-66.34179738 z M 25,7.0449219 A 16.567791,16.567791 0 0 1 41.568359,23.611328 16.567791,16.567791 0 0 1 25,40.179688 16.567791,16.567791 0 0 1 8.4316406,23.611328 16.567791,16.567791 0 0 1 25,7.0449219 Z"
|
||||
style="fill:#b3b3b3;fill-opacity:1;stroke:#000000;stroke-width:1.42647755;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.14009663"
|
||||
style="fill:#b3b3b3;fill-opacity:1;stroke:#000000;stroke-width:1.42648;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.140097"
|
||||
inkscape:connector-curvature="0" /><g
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:19.89921188;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:19.8992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
transform="matrix(0.03566902,0,0,0.03566902,7.1653112,5.8664798)"
|
||||
id="g4569"><g
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
id="g4567"
|
||||
transform="matrix(0.1,0,0,-0.1,0,511)"><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4551"
|
||||
d="m 6633.3,110 v -4900 h 331.8 331.8 V 110 5010 h -331.8 -331.8 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4553"
|
||||
d="m 5331.8,110 v -3930.2 h 319 319 V 110 4040.2 h -319 -319 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4555"
|
||||
d="m 2703.1,110 v -2934.9 h 331.8 331.8 V 110 3044.9 h -331.8 -331.8 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4557"
|
||||
d="m 7934.9,110 v -2603.1 h 331.8 331.8 V 110 2713.1 h -331.8 -331.8 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4559"
|
||||
d="m 1401.6,110 v -2299.4 l 326.7,7.6 324.1,7.7 V 110 2394.1 l -324.1,7.7 -326.7,7.7 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4561"
|
||||
d="m 4030.2,110 v -1965.1 h 319 319 V 110 2075.1 h -319 -319 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4563"
|
||||
d="m 9241.6,117.7 7.7,-1960 326.7,-7.7 324.1,-7.6 V 110 2075.1 h -331.8 -331.8 z" /><path
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
style="fill:#b3b3b3;stroke:none;stroke-width:198.992;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.584541"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4565"
|
||||
d="M 100,110 V -1191.6 H 431.8 763.6 V 110 1411.6 H 431.8 100 Z" /></g></g></g><path
|
||||
id="path5053"
|
||||
d="m 17.803388,3.8510121 c -27.0931969,3.4447841 4.183855,32.9059859 4.183855,32.9059859 0,0 22.90934,-36.35076996 -4.183855,-32.9059859 z m 0.39933,3.1407308 A 8.2838955,8.2838955 0 0 1 27.4655,14.163908 8.2838955,8.2838955 0 0 1 20.292367,23.426814 8.2838955,8.2838955 0 0 1 11.029462,16.25368 8.2838955,8.2838955 0 0 1 18.202718,6.9917429 Z"
|
||||
style="fill:#d52b1e;fill-opacity:1;stroke:#000000;stroke-width:0.71323878;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.14009663"
|
||||
d="m 17.803388,1.8510121 c -27.0931969,3.4447841 4.183855,32.9059859 4.183855,32.9059859 0,0 22.90934,-36.35077 -4.183855,-32.9059859 z m 0.39933,3.1407308 A 8.2838955,8.2838955 0 0 1 27.4655,12.163908 8.2838955,8.2838955 0 0 1 20.292367,21.426814 8.2838955,8.2838955 0 0 1 11.029462,14.25368 8.2838955,8.2838955 0 0 1 18.202718,4.9917429 Z"
|
||||
style="fill:#0090c8;fill-opacity:1;stroke:#000000;stroke-width:0.713239;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.140097"
|
||||
inkscape:connector-curvature="0" /></g></svg>
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.1 KiB |
5
src/assets/style.css
Normal file
@ -0,0 +1,5 @@
|
||||
/*
|
||||
Theme Name: Ticino Soundmap Theme
|
||||
Author: Luca Rullo
|
||||
Author URI: https://lrullo.audio-lab.org
|
||||
*/
|
@ -1,11 +0,0 @@
|
||||
// The file contents for the current environment will overwrite these during build.
|
||||
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
|
||||
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
|
||||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
mapbox: {
|
||||
accessToken: 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'
|
||||
}
|
||||
};
|
BIN
src/favicon.ico
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 159 B |
8
src/functions.php
Normal file
@ -0,0 +1,8 @@
|
||||
<?php
|
||||
/* wordpress theme functions */
|
||||
function mytheme_post_thumbnails() {
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
}
|
||||
add_action( 'after_setup_theme', 'mytheme_post_thumbnails' );
|
||||
?>
|
||||
|
@ -5,13 +5,14 @@
|
||||
<title>Ticino Soundmap</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="La mappa sonora del Canton Ticino">
|
||||
<meta name="keywords" content="Ticino, Soundmap, Mappa Sonora">
|
||||
<meta name="author" content="SUPSI">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<noscript>
|
||||
[Ticino Soundmap] You need javascript
|
||||
</noscript>
|
||||
<noscript>La mappa sonora del Canton Ticino</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
1
src/index.php
Normal file
@ -0,0 +1 @@
|
||||
<?php require get_template_directory()."/index.html"; ?>
|
BIN
src/screenshot.png
Normal file
After Width: | Height: | Size: 955 KiB |
5
src/style.css
Normal file
@ -0,0 +1,5 @@
|
||||
/*
|
||||
Theme Name: Ticino Soundmap Theme
|
||||
Author: Luca Rullo
|
||||
Author URI: https://lrullo.audio-lab.org
|
||||
*/
|
@ -13,19 +13,19 @@ div.content h1 span {font-size:3em;padding:0;}
|
||||
|
||||
div.title h2 span { background:#ccc; color:#fff; padding:0 20px;}
|
||||
div.title h3 {color:#000; }
|
||||
div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#d52b1e;}
|
||||
div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#0090C8;}
|
||||
div.content div.content-col > * {margin:0 20px;height:100%;display:block;}
|
||||
div.content div.col-right-30 > * {margin-bottom:20px;}
|
||||
div.content div.tags-container,
|
||||
div.content div.categories-container,
|
||||
div.content div.content-container {width:100%;clear:both;position:relative;padding:10px 0px;}
|
||||
div.content div.content-container h2 {font-size:1em;color:#d52b1e;margin-left:5px;}
|
||||
div.content div.content-container h2 {font-size:1em;color:#0090C8;margin-left:5px;}
|
||||
div.content-container img {max-width:100%;}
|
||||
div.content-container p code {background:#efefef;padding:1px;}
|
||||
div.content-container figcaption {background-color:#efefef;padding:10px;font-size:0.8em;}
|
||||
div.content ul {list-style:none;max-width:100%;clear:both;padding:0;height:100%;}
|
||||
div.content ul.categories li,
|
||||
div.content ul.tags li {float:left;padding:5px;margin:2px;background-color:#d52b1e;color:#fff;}
|
||||
div.content ul.tags li {float:left;padding:5px;margin:2px;background-color:#0090C8;color:#fff;}
|
||||
div.content div.audio-box audio {margin-top:10px;margin-bottom:10px;}
|
||||
div.close-button {cursor:pointer;position:absolute;right:0;top:0;z-index:100;padding:10px;}
|
||||
div close-button:hover {background:#eee;}
|
||||
@ -34,20 +34,20 @@ div.content-metadata {top:20px;position:relative;}
|
||||
div.content div.audio-box ul li {padding:3px 0;font-size:0.8em;}
|
||||
|
||||
/*filter */
|
||||
span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;}
|
||||
span.tablet-term { background:#0090C8;color:#fff; padding:2px 10px;}
|
||||
span.tablet-term b {font-weight:bold;cursor:pointer;}
|
||||
span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
|
||||
|
||||
|
||||
/* pages */
|
||||
app-pages div.container-map-pages {padding-top:100vh;background-color:#d52b1e;}
|
||||
app-pages div.container-map-pages {padding-top:100vh;background-color:#0090C8;}
|
||||
|
||||
/* trick */
|
||||
div.mapboxgl-ctrl-bottom-right,
|
||||
div.mapboxgl-ctrl-bottom-left { display:none;}
|
||||
|
||||
@media screen and (max-device-width: 720px) {
|
||||
body { background-color:#d52b1e}
|
||||
body { background-color:#0090C8}
|
||||
div.col-right-30 {width:100%; border:0;}
|
||||
div.col-left-70 {width:100%;}
|
||||
div.title h3 {display:none;}
|
||||
|