Skip to content
GitLab
Commit 14ca282e authored by Santhanavanich's avatar Santhanavanich
Browse files

update design

parent d6aa39c3
No related merge requests found
Pipeline #4282 passed with stage
in 22 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 86 additions and 55 deletions
+86 -55
public/content/content.json
+ 3
- 3
View file @ 14ca282e
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
{ {
"item": { "item": {
"title": "COVID-STA", "title": "COVID-STA",
"project": "", "project": "iCity Project",
"author": { "author": {
"firstName": "Joe", "firstName": "Joe",
"lastName": "T. Santhanavanich", "lastName": "T. Santhanavanich",
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
"project_is_on_going": true, "project_is_on_going": true,
"imageLink":"imgs/thumbnails/covidSta.jpg", "imageLink":"imgs/thumbnails/covidSta.jpg",
"keywords":["SensorThings API","COVID-19", "Urban Analytics"], "keywords":["SensorThings API","COVID-19", "Urban Analytics"],
"description_en":"The OGC SensorThings API server for managing the COVID-19 case statistic data.", "description_en":"The COVID-STA is the OGC SensorThings API data server which provides an open standard-based and geospatial-enabled framework to interconnect the COVID-19 statistics and applications over the web.",
"description_de":"Der OGC SensorThings API Server zur Verwaltung der COVID-19 Fallstatistikdaten." "description_de":"Der COVID-STA ist der OGC SensorThings API-Datenserver, der ein auf offenen Standards basierendes und raumbezogenes Framework zur Verfügung stellt, um die COVID-19-Statistiken und Anwendungen über das Web miteinander zu verbinden."
}, },
"links": { "links": {
"demo": "https://covidsta.hft-stuttgart.de/server/", "demo": "https://covidsta.hft-stuttgart.de/server/",
......
public/css/main.css
+ 78
- 49
View file @ 14ca282e
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
margin-bottom: 0; margin-bottom: 0;
background-color: #fff; background-color: #fff;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.jumbotron { .jumbotron {
padding-top: 6rem; padding-top: 6rem;
...@@ -15,8 +16,18 @@ ...@@ -15,8 +16,18 @@
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
} }
h1, h2, h3, h4, h5, h6 { h1,
font-family: 'Roboto', sans-serif; h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto', sans-serif;
}
.content-subtitle {
font-family: 'Noto Sans JP';
font-size: 0.85em;
} }
.jumbotron p:last-child { .jumbotron p:last-child {
...@@ -40,8 +51,9 @@ footer p { ...@@ -40,8 +51,9 @@ footer p {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
body{ body {
background-color: #cc3125;/* thistle; */ background-color: #cc3125;
/* thistle; */
} }
.bd-placeholder-img { .bd-placeholder-img {
...@@ -65,56 +77,65 @@ a { ...@@ -65,56 +77,65 @@ a {
/* text-decoration: underline; */ /* text-decoration: underline; */
background-color: transparent; background-color: transparent;
} }
a:hover{
a:hover {
color: rgb(65, 57, 57); color: rgb(65, 57, 57);
} }
a:visited { a:visited {
/* color: black; */ /* color: black; */
} }
.myBtn { .myBtn {
color: #fff; color: #fff;
background-color: tomato; background-color: tomato;
border-color: thistle; /*set the color you want here*/ border-color: thistle;
width: 180px; /*set the color you want here*/
width: 180px;
} }
.myBtn:hover, .myBtn:focus, .myBtn:active, .myBtn.active, .open>.dropdown-toggle.myBtn {
color: #fff; .myBtn:hover,
background-color: thistle; .myBtn:focus,
border-color: #285e8e; /*set the color you want here*/ .myBtn:active,
.myBtn.active,
.open>.dropdown-toggle.myBtn {
color: #fff;
background-color: thistle;
border-color: #285e8e;
/*set the color you want here*/
} }
.thumbimg{ .thumbimg {
width: 100%; width: 100%;
height: 225px; height: 225px;
} }
a.button { a.button {
-webkit-appearance: button; -webkit-appearance: button;
-moz-appearance: button; -moz-appearance: button;
appearance: button; appearance: button;
text-decoration: none; text-decoration: none;
color: blue; color: blue;
border: solid; border: solid;
border: 4px; border: 4px;
} }
.windSVG{ .windSVG {
margin-right : 20px; margin-right: 20px;
} }
.hftlogo{ .hftlogo {
/* margin-right : 20px; */ /* margin-right : 20px; */
/* width: 100px; */ /* width: 100px; */
} }
.hftlogo:hover{
.hftlogo:hover {
cursor: pointer; cursor: pointer;
} }
.extension{ .extension {
padding: 20px 10px; padding: 20px 10px;
/* min-height: 445px; */ /* min-height: 445px; */
/* max-height: 445px; */ /* max-height: 445px; */
...@@ -122,25 +143,25 @@ a.button { ...@@ -122,25 +143,25 @@ a.button {
height: 610px; height: 610px;
} }
.py-5{ .py-5 {
padding: 1rem!important; padding: 1rem !important;
} }
.card-body{ .card-body {
min-height: 90px; min-height: 90px;
padding: 0.5rem 0.5rem 0.2rem; padding: 0.5rem 0.5rem 0.2rem;
} }
.card-text{ .card-text {
max-height: 85px; max-height: 85px;
overflow: auto; overflow: auto;
/* overflow-y: auto; */ /* overflow-y: auto; */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
} }
.btnGroupDiv{ .btnGroupDiv {
/* padding: 20px 00px 00px 20px; */ /* padding: 20px 00px 00px 20px; */
padding: 0.5rem; padding: 0.5rem;
} }
...@@ -153,15 +174,17 @@ a.button { ...@@ -153,15 +174,17 @@ a.button {
color: #9e9e9e !important; color: #9e9e9e !important;
} }
.z-depth-1, .chip:active { .z-depth-1,
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; .chip:active {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
} }
.hftBackground { .hftBackground {
background-image: url(../imgs/avatar/Bibliothek_HFT_f.jpg); background-image: url(../imgs/avatar/Bibliothek_HFT_f.jpg);
background-size: cover; background-size: cover;
} }
/* .hftBackground::after { /* .hftBackground::after {
content: ''; content: '';
z-index: 0; z-index: 0;
...@@ -171,9 +194,9 @@ a.button { ...@@ -171,9 +194,9 @@ a.button {
top: 0; top: 0;
} */ } */
main[role=main]{ main[role=main] {
background-color: #f8f9fa!important; background-color: #f8f9fa !important;
padding-bottom: 1rem!important; padding-bottom: 1rem !important;
} }
a { a {
...@@ -191,30 +214,34 @@ a:hover { ...@@ -191,30 +214,34 @@ a:hover {
background-color: #cccccc; background-color: #cccccc;
color: #0f0f0f; color: #0f0f0f;
margin-left:40%; margin-left: 40%;
cursor: pointer; cursor: pointer;
border-radius: .2rem; border-radius: .2rem;
border: none; border: none;
border: 0px; border: 0px;
width: 6em; width: 6em;
height: 2em; height: 2em;
} }
.previous:disabled, .previous:disabled,
.previous[disabled]{ .previous[disabled] {
cursor: not-allowed; cursor: not-allowed;
background-color: #f1f1f1; background-color: #f1f1f1;
color: #666666; color: #666666;
} }
.next:disabled, .next:disabled,
.next[disabled]{ .next[disabled] {
background-color: #0069d970; background-color: #0069d970;
color: #666666; color: #666666;
cursor: not-allowed; cursor: not-allowed;
} }
#papercount{
#papercount {
text-align: center; text-align: center;
} }
.next { .next {
/* background-color: #2196f3 !important; */ /* background-color: #2196f3 !important; */
color: white; color: white;
...@@ -228,7 +255,8 @@ a:hover { ...@@ -228,7 +255,8 @@ a:hover {
height: 2em; height: 2em;
} }
.next:hover{
.next:hover {
background-color: #005bbd !important; background-color: #005bbd !important;
border: none; border: none;
border: 0px; border: 0px;
...@@ -237,6 +265,7 @@ a:hover { ...@@ -237,6 +265,7 @@ a:hover {
.round { .round {
border-radius: 50%; border-radius: 50%;
} }
.publication_card{
overflow:hidden; .publication_card {
overflow: hidden;
} }
\ No newline at end of file
public/index.html
+ 4
- 2
View file @ 14ca282e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<div class="container"> <div class="container">
<img src="imgs/ugl.svg" class="windSVG" width="100px" alt="wind"> <img src="imgs/ugl.svg" class="windSVG" width="100px" alt="wind">
<h1 class="display-5 fw-bold" >Urban Geoinformatics Lab</h1> <h1 class="display-5 fw-bold" >Urban Geoinformatics Lab</h1>
<h3 class="text-muted"> @HFT Stuttgart </h3> <h3 style="color:#cc3125"> @HFT Stuttgart </h3>
</div> </div>
</section> </section>
...@@ -420,7 +420,9 @@ ...@@ -420,7 +420,9 @@
<p class="float-right"> <p class="float-right">
<a id="rgc_backtotop" href="#">Back to top</a> <a id="rgc_backtotop" href="#">Back to top</a>
</p> </p>
<p>&copy; HFT Stuttgart, 2020 - <span id="current-year"></span>.</p> <p>
<img src="imgs/ugl.svg" alt="" width="32px">
Urban Geoinformatics Lab @HFT Stuttgart, 2020 - <span id="current-year"></span>.</p>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a> <a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a> <a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div> </div>
......
public/js/add_content.js
+ 1
- 1
View file @ 14ca282e
...@@ -52,7 +52,7 @@ function addcontent(item) { ...@@ -52,7 +52,7 @@ function addcontent(item) {
new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' + new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
'<div class="card mb-4 shadow-sm extension overflow-auto">' + '<div class="card mb-4 shadow-sm extension overflow-auto">' +
'<h5>' + item.item.title + ' <span class="lead text-muted"> ' + item.item.project + '</span></h5>' + '<h5>' + item.item.title + ' <span class="content-subtitle text-muted"> ' + item.item.project + '</span></h5>' +
'<img class="thumbimg" src="' + item.item.imageLink + '" alt="">' + '<img class="thumbimg" src="' + item.item.imageLink + '" alt="">' +
'<div class="card-body">' + '<div class="card-body">' +
'<p class="card-text-lg small">' + '<p class="card-text-lg small">' +
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal