design updates

This commit is contained in:
Jonathan Hess 2017-02-06 14:35:58 +01:00
parent c10b4c7683
commit 2e23ca53cb
15 changed files with 3925 additions and 5424 deletions

View file

@ -7,7 +7,7 @@
"uuidString": "0F980939-F438-4FD0-A285-8ECBB562D22C"
}
],
"creatorBuild": "25479",
"creatorBuild": "25504",
"files": {
"\/.bowerrc": {
"ft": 8192,
@ -27,48 +27,18 @@
"oAP": "\/.gitignore",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/action_provision": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/action_provision",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/action_set_name": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/action_set_name",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/creator_uid": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/creator_uid",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/id": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/id",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/index_uuid": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/index_uuid",
"oF": 0
},
"\/.vagrant\/machines\/default\/virtualbox\/synced_folders": {
"ft": 8192,
"oA": 2,
"oAP": "\/.vagrant\/machines\/default\/virtualbox\/synced_folders",
"oF": 0
},
"\/bin\/post_compile": {
"ft": 8192,
"oA": 2,
"oAP": "\/bin\/post_compile",
"oF": 0
},
"\/bitbucket-pipelines.yml": {
"ft": 8192,
"oA": 2,
"oAP": "\/bitbucket-pipelines.yml",
"oF": 0
},
"\/bower.json": {
"ft": 524288,
"oA": 1,
@ -160,42 +130,12 @@
"oAP": "\/publichealth\/__init__.py",
"oF": 0
},
"\/publichealth\/__pycache__\/__init__.cpython-34.pyc": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/__pycache__\/__init__.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/__pycache__\/urls.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/__pycache__\/urls.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/__init__.py": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/home\/__init__.py",
"oF": 0
},
"\/publichealth\/home\/__pycache__\/__init__.cpython-34.pyc": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/home\/__pycache__\/__init__.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/__pycache__\/models.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/home\/__pycache__\/models.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/__pycache__\/util.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/home\/__pycache__\/util.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/migrations\/0001_initial.py": {
"ft": 8192,
"oA": 2,
@ -220,30 +160,6 @@
"oAP": "\/publichealth\/home\/migrations\/__init__.py",
"oF": 0
},
"\/publichealth\/home\/migrations\/__pycache__\/0001_initial.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/home\/migrations\/__pycache__\/0001_initial.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/migrations\/__pycache__\/0002_create_homepage.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/home\/migrations\/__pycache__\/0002_create_homepage.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/migrations\/__pycache__\/0003_auto_20161209_0655.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/home\/migrations\/__pycache__\/0003_auto_20161209_0655.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/migrations\/__pycache__\/__init__.cpython-34.pyc": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/home\/migrations\/__pycache__\/__init__.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/home\/models.py": {
"ft": 8192,
"oA": 2,
@ -274,18 +190,6 @@
"oAP": "\/publichealth\/search\/__init__.py",
"oF": 0
},
"\/publichealth\/search\/__pycache__\/__init__.cpython-34.pyc": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/search\/__pycache__\/__init__.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/search\/__pycache__\/views.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/search\/__pycache__\/views.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/search\/templates\/search\/search.html": {
"ft": 8192,
"oA": 2,
@ -310,24 +214,6 @@
"oAP": "\/publichealth\/settings\/__init__.py",
"oF": 0
},
"\/publichealth\/settings\/__pycache__\/__init__.cpython-34.pyc": {
"ft": 8192,
"oA": 1,
"oAP": "\/publichealth\/settings\/__pycache__\/__init__.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/settings\/__pycache__\/base.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/settings\/__pycache__\/base.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/settings\/__pycache__\/dev.cpython-34.pyc": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/settings\/__pycache__\/dev.cpython-34.pyc",
"oF": 0
},
"\/publichealth\/settings\/base.py": {
"ft": 8192,
"oA": 2,
@ -385,6 +271,19 @@
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/modules\/_mixins.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 1,
"oAP": "\/publichealth\/static\/css\/css\/_mixins.css",
"oF": 0,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/modules\/_modules.scss": {
"aP": 0,
"bl": 0,
@ -3307,6 +3206,22 @@
"oF": 0,
"opt": 0
},
"\/publichealth\/static\/mockup\/images\/thumb_news_1.jpg": {
"ft": 16384,
"iS": 173465,
"oA": 0,
"oAP": "\/publichealth\/static\/mockup\/images\/thumb_news_1.jpg",
"oF": 0,
"opt": 1
},
"\/publichealth\/static\/mockup\/images\/thumb_news_2.jpg": {
"ft": 16384,
"iS": 72163,
"oA": 0,
"oAP": "\/publichealth\/static\/mockup\/images\/thumb_news_2.jpg",
"oF": 0,
"opt": 1
},
"\/publichealth\/static\/mockup\/index.html": {
"ft": 8192,
"oA": 2,
@ -4062,6 +3977,10 @@
"active": 0,
"optionString": ""
},
"no-await-in-loop": {
"active": 0,
"optionString": ""
},
"no-bitwise": {
"active": 0,
"optionString": "{'allow': ['~'], 'int32Hint': true}"
@ -4602,6 +4521,10 @@
"active": 0,
"optionString": "{'destructuring': 'any', 'ignoreReadBeforeAssign': false}"
},
"prefer-destructuring": {
"active": 0,
"optionString": "{'array': true, 'object': true}, {'enforceForRenamedProperties': false}"
},
"prefer-numeric-literals": {
"active": 0,
"optionString": ""

View file

@ -10,7 +10,7 @@
body {
margin-top: 64px;
margin-top: 104px;
}
section {

View file

@ -1,13 +1,96 @@
/* Page header */
$banner-height: 700px;
// Carousel
#myCarousel {
background: $gray-lighter;
.item {
background-color: lighten($brand-primary, 10%);
min-height: 300px;
img {
height: 300px;
background-size: cover;
background-position: center;
opacity: .5;
width: 100%;
}
h3 {
text-transform: uppercase;
font-weight: 300;
}
p {
line-height: 1.2;
width: 80%;
margin: 0 auto;
}
.btn {
margin-top: 20px;
}
}
.nav-thumbs {
@mixin max-screen($max) {
@media only screen and (max-width: $max) {
@content;
list-style: none;
display: flex;
margin: 0;
padding: 0;
text-align: center;
li {
float: left;
width: 25%;
&.active {
background-color: $brand-primary;
a {
color: white;
}
}
.glyphicon {
display: block;
}
}
.title {
text-transform: uppercase;
font-weight: 300;
text-decoration: none;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
small {
font-weight: 500;
text-transform: none;
display: block;
font-size: .7em;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
&.nav-justified > li > a {
border-radius: 0px;
}
}
@include max-screen($screen-xs-max) {
.nav-thumbs {
.title {
font-size: .7em;
}
}
}
}
/* Page header */
$banner-height: 700px;
#carousel-banner {
display: none;
}
#banner, #carousel-banner {
padding-top: 0 !important;
padding-bottom: 0em;

View file

@ -1,16 +1,16 @@
footer#footer {
padding: 6em 0;
background-color: $brand-secondary;
background-color: $brand-primary;
color: white;
a {
color: lighten($brand-primary, 10%);
color: lighten($brand-secondary, 10%);
}
}
.copyright {
background-color: darken($brand-secondary, 15%);
background-color: darken($brand-primary, 15%);
color: white;
text-align: center;
font-size: 70%;

View file

@ -0,0 +1,7 @@
// max-screen
@mixin max-screen($max) {
@media only screen and (max-width: $max) {
@content;
}
}

View file

@ -1,3 +1,4 @@
@import "mixins";
@import "navbar";
@import "banner";
@import "footer";

View file

@ -1,24 +1,49 @@
.navbar-default {
&.navbar-pre {
background-color: $brand-primary;
.navbar-pre {
background-color: $brand-primary;
height: 40px;
.navbar-text, li a {
margin: 5px 15px;
.nav {
text-align: right;
a {
color: white;
font-size: 70%;
padding: 10px;
line-height: 40px;
vertical-align: middle;
}
li {
margin: 0 5px;
padding: 0;
.contact-nav {
margin-right: 1em;
a {
margin: 0 5px;
font-size: .7em;
&.link {
text-transform: uppercase;
}
}
}
.language-nav {
text-transform: uppercase;
a {
margin: 0;
padding: 0 10px;
&.active, &:hover {
background-color: white;
color: $brand-primary;
}
}
}
@include max-screen($screen-xs-max) {
.contact-nav a {
font-size: .9em;
padding: 10px 5px;
}
}
}
}
.navbar-default {
&.navbar-main {
top: 35px;
top: 40px;
}
.navbar-header {
.navbar-brand {

View file

@ -3,38 +3,74 @@
#news {
.panel-default {
position: relative;
font-size: 90%;
transition: transform .6s;
padding-top: 75%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
overflow: hidden;
background: lighten($brand-primary, 10%);
&:hover {
transform: scale(1.05);
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.panel-header img {
max-width: 100%;
}
.panel-body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
transform: translateY(60%);
background-color: rgba($brand-primary, .8);
transition: transform .65s;
h3, p {
color: white;
}
h3 {
padding: 15px;
font-size: 1.2em;
margin: 0;
height: 40%;
display: table;
span {
display: table-cell;
vertical-align: bottom;
}
}
p, a {
font-size: .8em;
}
p {
padding: 0 15px;
line-height: 1.2;
margin: 0;
}
a {
position: relative;
font-size: 80%;
z-index: 2;
margin: 10px 0 0 15px;
text-align: center;
}
}
.panel-footer {
font-size: 80%;
text-transform: uppercase;
color: lighten($text-color, 10%);
&:hover .panel-body {
transform: rotateY(0);
}
// expand link over the thumbnail
a.fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
font-size: 0;
}
}
}

View file

@ -15,8 +15,8 @@ $gray: #666 !default;
$gray-light: #bbb !default;
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: #968BDE !default;
$brand-secondary: #2643A9 !default;
$brand-primary: #2643A9 !default;
$brand-secondary: #968BDE !default;
$brand-success: #4CAF50 !default;
$brand-info: #9C27B0 !default;
$brand-warning: #ff9800 !default;

View file

@ -0,0 +1 @@
$(document).ready(function(){$("#myCarousel").carousel({interval:4e3});var a=!1;$("#myCarousel").on("click",".nav a",function(){a=!0,$(".nav li").removeClass("active"),$(this).parent().addClass("active")}).on("slid.bs.carousel",function(e){if(!a){var i=$(".nav").children().length-1,n=$(".nav li.active");n.removeClass("active").next().addClass("active");var s=parseInt(n.data("slide-to"));i==s&&$(".nav li").first().addClass("active")}a=!1})});

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

View file

@ -12,17 +12,19 @@
<body>
<!-- Header -->
<nav class="navbar navbar-default navbar-pre navbar-fixed-top">
<nav class="navbar-pre navbar-fixed-top">
<div class="container">
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Kontakt</a></li>
<p class="navbar-text"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> +41 31 389 92 86</p>
<p class="navbar-text"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info@public-health.ch</p>
<li class="active"><a href="#">De</a></li>
<li><a href="#">Fr</a></li>
</ul>
</div>
<div class="nav">
<span class="contact-nav">
<a class="link" href="#">Kontakt</a>
<a href="#"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> <span class="hidden-xs">+41 31 389 92 86</span></a>
<a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <span class="hidden-xs">info@public-health.ch</span></a>
</span>
<span class="language-nav">
<a class="active "href="#">De</a>
<a href="#">Fr</a>
</span>
</div>
</div>
</nav>
<nav class="navbar navbar-default navbar-main navbar-fixed-top">
@ -70,6 +72,62 @@
<!-- /.container -->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<image style="background-image:url(images/banner_0.jpg)" />
<div class="carousel-caption">
<h3>
Swiss Public Health Conference</h3>
<p class="hidden-xs">Die Swiss Public Health Conference 2016 ist erfolgreich zu Ende gegangen. Wir bedanken uns bei Ihnen an dieser Stelle für Ihre engagierte Teilnahme und die vielen angeregten Gespräche während der Konferenz.</p>
<a href="#" class="btn btn-default">Mehr Infos</a>
</div>
</div>
<!-- End Item -->
<div class="item">
<div class="carousel-caption">
<h3>Projekte & Aktivitäten</h3>
<p class="hidden-xs">Public Health Schweiz will Prävention und Gesundheitsförderung stärken. Durch unsere Aktionen und Stellungsnahmen treten wir für dieses Ziel ein und stehen damit immer im Zentrum der Aktualität:</p>
<a href="#" class="btn btn-default">Mehr Infos</a>
</div>
</div>
<!-- End Item -->
<div class="item">
<div class="carousel-caption">
<h3>
Über uns</h3>
<p class="hidden-xs">Public Health Schweiz ist der Fachverband der Public-Health-Fachleute. Er vertritt die Anliegen seiner Mitglieder und unterstützt die Entscheidungsträgerinnen und Entscheidungsträger fachlich</p>
<a href="#" class="btn btn-default">Mehr Infos</a>
</div>
</div>
<!-- End Item -->
<div class="item">
<image style="background-image:url(images/banner_4.jpg)" />
<div class="carousel-caption">
<h3>
Mitgliedschaft</h3>
<p class="hidden-xs">Werden Sie jetzt Mitglied von Public Health Schweiz und profitieren Sie von vielen Vorteilen und Vergünstigungen. Als Mitglied tragen Sie zudem dazu bei, dass sich Public Health Schweiz weiterhin für die Anliegen der Public-Health-Fachleute einsetzen kann.</p>
<a href="#" class="btn btn-default">Mehr Infos</a>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<div class="container">
<ul class="nav nav-thumbs">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;<span class="title">Aktuell<small class="hidden-xs">Swiss Public Health Conference</small></span></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span>&nbsp;<span class="title">Projekte<small class="hidden-xs">Prävention und Gesundheitsförderung</small></span></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;<span class="title">Über uns<small class="hidden-xs">Informationen zu Public Health</small></span></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;<span class="title">Mitgliedschaft<small class="hidden-xs">Werden Sie jetzt Mitglied</small></span></a></li>
</ul>
</div>
</div>
<!-- End Carousel -->
<!-- Banner -->
<div id="carousel-banner" class="slide">
@ -124,40 +182,36 @@
<section id="news">
<div class="container">
<h2>News</h2>
<div class="row">
<div class="col-sm-4">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-header">
<img src="images/news_1.jpg" alt="">
</div>
<img src="images/thumb_news_1.jpg" alt="">
<div class="panel-body">
<p>Ehrenmitgliedschaften</p>
<p><a href="/news-details.html" class="btn btn-primary btn-xs">Mehr erfahren</a></p>
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span> Kategorie 1, Kategorie 2
<h3><span>Ehrenmitgliedschaften</span></h3>
<p>Nicole Probst-Hensch, Professorin für Pharmakologie und Epidemiologie am Schweizerischen Tropen- und Public Health Institut der Universität Basel, wurde die Ehrenmitgliedschaft von Public Health Schweiz verliehen.</p>
<a href="/news-details.html" class="btn btn-default btn-xs">Mehr erfahren</a>
</div>
<a href="/news-details.html" class="fill"></a>
</div>
</div>
<div class="col-sm-4">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-header">
<img src="images/banner_0.jpg" alt="">
</div>
<img src="images/thumb_news_2.jpg" alt="">
<div class="panel-body">
<p>Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet</p>
<p><a href="#" class="btn btn-primary btn-xs">Mehr erfahren</a></p>
<h3><span>Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet</span></h3>
<a href="/news-details.html" class="btn btn-default btn-xs">Mehr erfahren</a>
</div>
<a href="/news-details.html" class="fill"></a>
</div>
</div>
<div class="col-sm-4">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="img-crop"></div>
<div class="panel-body">
<p>Wirksamer Schutz der Kinder und Jugendlichen vor Tabakkonsum rückt in weite Ferne</p>
<p><a href="#" class="btn btn-primary btn-xs">Mehr erfahren</a></p>
<h3><span>Wirksamer Schutz der Kinder und Jugendlichen vor Tabakkonsum rückt in weite Ferne<span></h3>
<a href="/news-details.html" class="btn btn-default btn-xs">Mehr erfahren</a>
</div>
<a href="/news-details.html" class="fill"></a>
</div>
@ -284,6 +338,32 @@
<script src="assets/slick/slick.min.js"></script>
<script>
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 10000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
$('.carousel-inner.slick').slick({
autoplay: true,
autoplaySpeed: '10000',

View file

@ -12,17 +12,19 @@
<body>
<!-- Header -->
<nav class="navbar navbar-default navbar-pre navbar-fixed-top">
<nav class="navbar-pre navbar-fixed-top">
<div class="container">
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Kontakt</a></li>
<p class="navbar-text"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> +41 31 389 92 86</p>
<p class="navbar-text"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info@public-health.ch</p>
<li class="active"><a href="#">De</a></li>
<li><a href="#">Fr</a></li>
</ul>
</div>
<div class="nav">
<span class="contact-nav">
<a class="link" href="#">Kontakt</a>
<a href="#"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> <span class="hidden-xs">+41 31 389 92 86</span></a>
<a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <span class="hidden-xs">info@public-health.ch</span></a>
</span>
<span class="language-nav">
<a class="active "href="#">De</a>
<a href="#">Fr</a>
</span>
</div>
</div>
</nav>
<nav class="navbar navbar-default navbar-main navbar-fixed-top">