Skip to content
Snippets Groups Projects
Commit 8988c471 authored by Olimpia Magliulo's avatar Olimpia Magliulo
Browse files

Change layout 

- 3 main elements: header, content and footer.
- Header expects a logo on one corner and the language dropdown-
  menu on the other corner.
- Footer sticks to the bottom of the page if there is no content, but
  is pushed to end of the page when content exceeds window height.
- Default.css is reordered.
- Changes are device-responsive and rtl-responsive.
parent c37bd9f4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
templates/_footer.twig
+ 14
− 7
View file @ 8988c471
<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>
templates/_header.twig
+ 37
− 24
View file @ 8988c471
<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">&#xf1ab; {{ 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">&#xf1ab; {{ lang.name }}</option>
{% else -%}
<option value="{{ key }}">{{ lang.name }}</option>
{% endif -%}
{% endfor -%}
</select>
</div>
{% endif -%}
</form>
</div>
</div>
</div> <!-- wrap -->
</div> <!-- header -->
templates/base.twig
+ 14
− 22
View file @ 8988c471
......@@ -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>
......
www/assets/css/src/default-rtl.css
+ 4
− 0
View file @ 8988c471
......@@ -77,6 +77,10 @@ fieldset.fancyfieldset legend {
.v-center-right{
right: 0;
}
.logo-footer-right{
left:0;
right: auto;
}
/*selectize elements*/
div .item{
......
www/assets/css/src/default.css
+ 110
− 52
View file @ 8988c471
/* ***********************************************************
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 {
......
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