diff --git a/templates/_footer.twig b/templates/_footer.twig
index efbcb5847f704625c41e40df7b219a9d0ec46811..132ca0c67ac9a8d557de2a577688c0e959b38694 100644
--- a/templates/_footer.twig
+++ b/templates/_footer.twig
@@ -1,7 +1,14 @@
- <hr>
-
- <img src="/{{ baseurlpath }}resources/icons/ssplogo-fish-small.png" alt="Small fish logo" class="right">
- <div id="wrap">
- <p>Copyright © 2007-2017 <a href="http://uninett.no/">UNINETT AS</a></p>
- </div>
-
+ <div id="footer">
+ <div class="wrap">
+ <p class="center copyrights">
+ Copyright © 2007-2017
+ <br>
+ <i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/simplesamlphp/simplesamlphp">SimpleSAML</a>
+ </p>
+ <div class="logo-footer-right">
+ <div class="logo-footer">
+ <img class="pure-img" src="/{{ baseurlpath }}resources/icons/ssplogo-fish-small.png" alt="Small fish logo">
+ </div>
+ </div>
+ </div>
+ </div>
diff --git a/templates/_header.twig b/templates/_header.twig
index d0e0493b4ed0db244d9ebb6a329bcd60bd1111ce..dbec6c7b42d81f221ff10f35af9dc8ae45f78937 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -1,26 +1,39 @@
-<div id="header">
- <form id="SelectLang" class="pure-form" method="get">
- {% if not hideLanguageBar %}
- <div id="languagebar" class="right">
- {% for name, value in queryParams %}
- {%- if value -%}
- <input type="hidden" name="{{ name }}" value="{{ value }}" />
- {%- else %}
- <input type="hidden" name="{{ name }}" />
- {% endif %}
- {% endfor %}
+ <div id="header">
+ <div class="wrap">
+ <div class="left">
+ <div class="v-center logo-header">
+ <div id="logo">
+ <img class="pure-img" src="" alt="LOGO">
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="v-center language-bar">
+ <form id="SelectLang" class="pure-form" method="get">
+ {% if not hideLanguageBar -%}
+ <div id="languagebar">
+ {% for name, value in queryParams -%}
+ {% if value -%}
+ <input type="hidden" name="{{ name }}" value="{{ value }}" />
+ {%- else -%}
+ <input type="hidden" name="{{ name }}" />
+ {%- endif -%}
+ {%- endfor %}
- <select class="pure-input-1-4 language-menu selectize" name="language" id="language_selector">
- {% for key, lang in languageBar -%}
- {%- if key == currentLanguage -%}
- <option value="{{ key }}" selected="selected"> {{ lang.name }}</option>
- {%- else -%}
- <option value="{{ key }}">{{ lang.name }}</option>
- {%- endif -%}
- {% endfor %}
- </select>
- </div>
- {% endif %}
- </form>
-</div>
+ <select class="pure-input-1-4 language-menu selectize" name="language" id="language_selector">
+ {% for key, lang in languageBar -%}
+ {% if key == currentLanguage -%}
+ <option value="{{ key }}" selected="selected"> {{ lang.name }}</option>
+ {% else -%}
+ <option value="{{ key }}">{{ lang.name }}</option>
+ {% endif -%}
+ {% endfor -%}
+ </select>
+ </div>
+ {% endif -%}
+ </form>
+ </div>
+ </div>
+ </div> <!-- wrap -->
+ </div> <!-- header -->
diff --git a/templates/base.twig b/templates/base.twig
index caf8cf10f12adfd12c84184efa0fc1cbe9c23b7a..4f2e196ef9e40725feef1d3e035079eaa7de18b5 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -18,29 +18,21 @@
{% block preload %}{% endblock %}
</head>
<body id="{{ templateId }}">
-<div id="wrap"> <!-- header -->
- <div class="pure-g">
- <div class="pure-u-1">
- {% block header %}{% include "_header.twig" %}{% endblock %}
- </div>
- </div>
+ <div class="container">
+{% block header %}{% include "_header.twig" %}{% endblock %}
- <div id="content"> <!-- content -->
- <div class="pure-g">
- <div class="pure-u-1">
- {% block contentwrapper %}
- {% block content %}{% endblock %}
- {% endblock %}
- </div>
- </div>
- </div>
-</div>
- <div id="footer">
- <div class="pure-g">
- <div class="pure-u-1">
- {% block footer %}{% include "_footer.twig" %}{% endblock %}
- </div>
+ <div id="content">
+ <div class="wrap">
+ {% block contentwrapper -%}
+ {% block content %}{% endblock -%}
+ {% endblock %}
</div>
+ </div><!-- content -->
+ <div id="push"></div>
+ </div><!-- container -->
+
+ <div class="foot">
+{% block footer %}{% include "_footer.twig" %}{% endblock %}
</div>
<!-- postload javascript -->
@@ -58,8 +50,8 @@
{% endif %}
{% endif %}
{% endif %}{% endspaceless -%}
- <script type="text/javascript" src="/{{ baseurlpath }}assets/js/lib/clipboard.min.js"></script>
<script type="text/javascript" src="/{{ baseurlpath }}assets/js/lib/jquery-3.2.1.min.js"></script>
+ <script type="text/javascript" src="/{{ baseurlpath }}assets/js/lib/clipboard.min.js"></script>
<script type="text/javascript" src="/{{ baseurlpath }}assets/js/lib/selectize.min.js"></script>
<script type="text/javascript" src="/{{ baseurlpath }}assets/js/src/language.js"></script>
<script type="text/javascript" src="/{{ baseurlpath }}assets/js/src/script.js"></script>
diff --git a/www/assets/css/src/default-rtl.css b/www/assets/css/src/default-rtl.css
index 2a9883e84f4e7cfae2d058ebad7a8d15e8f9794c..9716b628ae547ab1aab4ed092bae68d9a440538b 100644
--- a/www/assets/css/src/default-rtl.css
+++ b/www/assets/css/src/default-rtl.css
@@ -77,6 +77,10 @@ fieldset.fancyfieldset legend {
.v-center-right{
right: 0;
}
+.logo-footer-right{
+ left:0;
+ right: auto;
+}
/*selectize elements*/
div .item{
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index aff46ef570c9d4d52f77534d3db8c2642629e2cd..2910c540f82d9cd82af3980fb4d7e81cadbaa8ae 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -1,44 +1,24 @@
/* ***********************************************************
GENERAL
************************************************************ */
-html{
+* {
+ margin:0;
+ padding:0;
+}
+html, body{
height: 100%;
-
}
body {
font-family: sans-serif;
- line-height: 1.5em;
-}
-#header{
+ line-height: 1.5;
+ min-height: 100%;
}
-#wrap{
+.wrap{
width: 80%;
max-width: 1100px;
margin: auto;
position:relative;
- padding-bottom: 4rem;
-}
-#footer {
- position: fixed;
- bottom: 0;
- height:4rem;
- width:100%;
- padding: 0.3rem;
- background-color: #efefef;
- text-align: center;
- z-index: 5;
-}
-#footer p {
- position: relative;
- bottom: 0;
- font-size: .75em;
-}
-
-img {
- position: relative;
- vertical-align: middle;
}
-
.left {
float: left;
}
@@ -46,11 +26,41 @@ img {
.right {
float: right;
}
-
.center {
padding: auto;
text-align: center;
}
+.v-center { /*specify a height to center vertically*/
+ display: table-cell;
+ vertical-align: middle;
+}
+
+/* ***********************************************************
+HEADER
+************************************************************ */
+#header{
+ height: 6rem;
+ background-color: darkcyan;
+}
+.logo-header{
+ min-width: 8em;
+ height: 6rem;
+}
+.language-menu{
+ font-family: FontAwesome, sans-serif;
+ min-width: 10rem;
+}
+.language-bar {
+ height: 6rem;
+}
+
+/* ***********************************************************
+CONTENT
+************************************************************ */
+#content {
+ padding-top: 2em;
+ padding-bottom: 4rem;
+}
.errorbox {
padding: 1.3rem;
margin: 0 0 1rem 0;
@@ -61,34 +71,57 @@ img {
position: relative;
box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
}
-.pure-button {
- border-radius: 0;
-}
-.inline{
- margin-top: 2em;
-}
/* ***********************************************************
-LANGUAGE MENU
+FOOTER
************************************************************ */
-.language-menu{
- float: right;
- font-family: FontAwesome, sans-serif;
- min-width: 10rem;
+.container{
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+ margin: 0 auto -6rem; /*negative margin = footer height + padding-top + padding-bottom*/
+}
+#bottom, #push {
+ height:4rem;
+}
+#footer {
+ background-color: darkcyan;
+ height: 4rem;
+ padding: 2rem 0 0;
+ text-align: center;
+}
+.copyrights {
+ height:4rem;
+ font-size: .75em;
+}
+.logo-footer-right{
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translate(0, -50%);
+}
+.logo-footer {
+ height: 4rem;
}
/* ***********************************************************
FORMS
************************************************************ */
-.pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="text"], .pure-form select, .pure-form textarea {
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+.textarea{
+ width:100%;
+ font-size: 0.9em;
+ line-height: 1.15;
}
-.form-align{
- position: relative;
+.file-upload input[type="url"][disabled]{
+ cursor: pointer;
+ color: inherit;
}
-
+input[type="file"]{
+ color:black;
+}
+.form-align{
+ position: relative;
+ }
.center-form{
display: inline-block;
margin-right: auto;
@@ -101,18 +134,30 @@ FORMS
transform: translate(0, -50%);
}
+/* PURE */
+.pure-button {
+ border-radius: 0;
+ }
+.pure-form input.edge{
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+.pure-form-aligned .pure-controls{
+ margin: 0 0 0 11em;
+ }
+.pure-select{
+ float: right;
+}
+/* SELECTIZE */
.selectize-input, .selectize-dropdown, .selectize-input.dropdown-active{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-
}
.selectize-input:after{
transform: translate(8px, 0);
}
-.pure-select{
- float: right;
-}
div .item{
float: left;
}
@@ -121,11 +166,14 @@ div .item{
}
/* ***********************************************************
-
+IMAGES
************************************************************ */
.fa {
font-family: FontAwesome !important;
}
+#clipboard-btn{
+ margin-right: 0.5em;
+}
/* ***********************************************************
TABLES
************************************************************ */
@@ -143,9 +191,19 @@ MEDIA QUERIES
body {
font-size: 0.875em;
}
+ .wrap{
+ width: 90%;
+ }
.pure-form .pure-input-sm-1-1{
width: 100%;
}
+ .pure-form-aligned .pure-controls{
+ margin: 0.5em 0 0;
+ float: left;
+ }
+ #content {
+ padding-top: 0;
+ }
}
@media screen and (max-width: 39.9375em) {
.hide-for-small-only {