FSFE/fsfe-website
25
31
Fork 92
Code Issues 65 Pull Requests 11 Wiki Activity

Enhances the mobile header/menu layout (#663)

Browse Source
This commit is contained in:
Michael Weimann
2018-11-28 12:07:39 +01:00
committed by max.mehl
parent 5eb5d9e711
commit a28f198fe7
7 changed files with 288 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build/xslt/fsfe_pageheader.xsl
View File

@@ -20,8 +20,6 @@
<xsl:element name="a">
<xsl:attribute name="href">#menu-list</xsl:attribute>
<xsl:attribute name="id">direct-to-menu-list</xsl:attribute>
<xsl:attribute name="data-toggle">collapse</xsl:attribute>
<xsl:attribute name="data-target">#menu-list</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
</xsl:element>

4
look/fellowship.min.css vendored
View File

File diff suppressed because one or more lines are too long

352
look/fsfe.less
View File

@@ -6,7 +6,6 @@ body {
background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
font-family: "Roboto", sans-serif;
}
.svg body {
background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
}
@@ -14,7 +13,6 @@ body {
#logo {
background: url(/graphics/logo_transparent.png) top left no-repeat;
}
.svg #logo {
background: url(/graphics/logo_transparent.svg) top left no-repeat;
}
@@ -29,8 +27,90 @@ body {
height: 85px;
}
@media (max-width: @screen-sm) {
#link-home a {
height: 50px;
}
#top {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
position: relative;
#search {
display: none;
}
}
#masthead {
background-color: #fff;
order: 1;
min-height: 50px;
padding: 10px;
#logo {
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
min-height: 50px;
min-width: 120px;
}
}
#menu {
@media (min-width: @screen-xs) {
background-color: #fff;
margin-left: 0;
order: 2;
padding: 10px;
#direct-links {
margin-bottom: 0;
#direct-to-menu-list {
font-size: 1.3em;
}
#direct-to-translations {
position: absolute;
top: 5px;
right: 85px;
}
#direct-to-login {
position: absolute;
top: 5px;
right: 10px;
}
}
#direct-to-home,
#direct-to-join {
display: none;
}
}
#menu-list {
display: block;
margin-top: 10px;
padding-bottom: 0;
}
#index-html {
#main {
padding-top: 0;
}
}
#bottom {
padding: 10px;
}
}
#menu {
@media (min-width: @screen-sm) {
margin-left: 200px;
}
}
@@ -355,6 +435,7 @@ img.signatory-logo {
}
#news {
padding-bottom: 1.5em;
@@ -420,6 +501,11 @@ img.signatory-logo {
font-size: 1.2em;
}
[newsteaser="yes"] {
font-weight: bold;
font-size: 1.2em;
}
#events {
clear: both;
@@ -433,7 +519,6 @@ img.signatory-logo {
h3 {
display: inline-block;
}
p.date {
#news .dt-published;
display: block;
@@ -443,7 +528,6 @@ img.signatory-logo {
}
}
}
a.learn-more {
line-height: 2;
}
@@ -455,7 +539,6 @@ img.signatory-logo {
float: left;
width: 69%;
}
#team {
display: inline-block;
float: left;
@@ -476,8 +559,6 @@ img.signatory-logo {
display: block;
margin: .5em 0;
}
margin-bottom: 20px;
}
#feeds {
@@ -529,21 +610,13 @@ ul.archivetaglist li {
padding: 0 0.25em;
}
ul.archivemeta li:first-child {
padding-left: 0;
}
ul.archivemeta li:first-child {padding-left: 0; }
ul.archivemeta li a, ul.archivetaglist li a {
color: #999;
}
ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
.archiveauthor {
margin: 0 0.25em;
}
.archiveauthor { margin: 0 0.25em; }
ul.archivetaglist {
margin-left: 6%;
}
ul.archivetaglist { margin-left: 6%; }
/* donate */
@@ -558,7 +631,6 @@ ul.archivetaglist {
.form-control;
max-width: 25em;
}
#donate-validate {
.btn;
.btn-lg;
@@ -594,10 +666,7 @@ ul.archivetaglist {
margin-left: -200px;
margin-top:-10em;
}
img {
display: none;
}
img {display: none;}
}
/* Valentine for ILOVEFS style */
@@ -606,7 +675,6 @@ ul.archivetaglist {
#logo {
background: url(/graphics/logov.png) top left no-repeat;
}
.svg #logo {
background: url(/graphics/logov.svg) top left no-repeat;
}
@@ -627,6 +695,7 @@ ul.archivetaglist {
}
/* Planet style */
.planet #motto {
@@ -650,7 +719,6 @@ ul.archivetaglist {
h2:first-child {
color: @brand-strong;
}
.blogitem {
padding-bottom: 3em;
margin-bottom: 3em;
@@ -691,94 +759,65 @@ tr.highlighted {
table.merchandise tr {
border-bottom: 1px solid #ddd;
}
table.merchandise tr:last-child {
border-bottom: medium none;
}
table.merchandise td {
padding: 10px 0;
}
table.merchandise .image {
width: 25%;
min-width: 250px;
}
table.merchandise .image img {
max-height: 120px;
margin: 5px;
}
table.merchandise .description {
width: 60%;
}
table.merchandise .quantity {
text-align: right;
width: 15%;
min-width: 100px
}
@media only screen and (max-device-width: 700px) {
table.merchandise .image {
min-width: 125px;
}
}
@media only screen and (max-device-width: 400px) {
table.merchandise .quantity {
min-width: 0px;
}
table.merchandise .image img {
max-width: 110px;
}
}
table.order-form {
width: 100%;
}
table.order-form .order-left {
min-width: 65px;
width: 10%;
}
table.order-form .order-right input,textarea {
max-width: 400px;
width: 90%;
}
table.order-form #order-submit {
width: auto;
}
form.thankyou {
margin-bottom: 10px;
}
.share-top-buttons-label {
margin-right: 1rem;
}
/* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
.share-buttons.bottom {
margin: 4em 0 -2em 0;
font-size: 0.7em;
}
.share-buttons-top {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.share-buttons-sidebar {
padding-left: 2rem;
}
.share-button-top,
.share-button-sidebar,
.share-buttons.bottom button.button,
.share-buttons.bottom label.button {
display: inline-block;
@@ -801,168 +840,122 @@ form.thankyou {
opacity: 0.9;
vertical-align: top;
}
.share-button-top,
.share-buttons.bottom,
.share-buttons-sidebar {
font-size: .7em;
}
.share-buttons-top,
.share-buttons-sidebar,
.share-buttons.bottom {
a:hover {
.share-buttons.bottom a:hover {
text-decoration: none;
}
.share-rss {
background-color: #f4a000;
background-image: url("/graphics/services/rss_white.png");
}
.share-rss:hover {
background-color: #f78200 !important;
}
.share-mail {
background-color: #6e6e6e;
background-image: url("/graphics/services/mail_white.png");
}
.share-mail:hover {
background-color: #272727 !important;
}
.share-mastodon {
background-color: #2b90d9;
background-image: url("/graphics/services/mastodon_white.png");
}
.share-mastodon:hover {
background-color: #1060a9 !important;
}
.share-diaspora {
background-color: #404040;
background-image: url("/graphics/services/diaspora_white.png");
}
.share-diaspora:hover {
background-color: #101010 !important;
}
.share-facebook {
.share-buttons.bottom .share-facebook {
background-color: #3b5998;
background-image: url("/graphics/services/facebook_white.png");
}
.share-facebook:hover {
.share-buttons.bottom .share-facebook:hover {
background-color: #143271 !important;
}
.share-twitter {
.share-buttons.bottom .share-twitter {
background-color: #55acee;
background-image: url("/graphics/services/twitter_white.png");
}
.share-twitter:hover {
.share-buttons.bottom .share-twitter:hover {
background-color: #338acc !important;
}
.share-support {
background-color: #202d79;
background-image: url("/graphics/services/fsfe_white.png");
padding-left: 25px;
&:hover {
background-color: #0a1763 !important;
}
}
}
.share-buttons.bottom .share-gplus {
background-color: #d34836;
background-image: url("/graphics/services/gplus_white.png");
}
.share-buttons.bottom .share-gplus:hover {
background-color: #b12614 !important;
}
.share-buttons.bottom .share-diaspora {
background-color: #404040;
background-image: url("/graphics/services/diaspora_white.png");
}
.share-buttons.bottom .share-diaspora:hover {
background-color: #101010 !important;
}
.share-buttons.bottom .share-flattr {
background-color: #7ea352;
background-image: url("/graphics/services/flattr_white.png");
}
.share-buttons.bottom .share-flattr:hover {
background-color: #5a7f2e !important;
}
.share-buttons.bottom .share-support {
background-color: #202d79;
background-image: url("/graphics/services/fsfe_white.png");
}
.share-buttons.bottom .share-support:hover {
background-color: #0a1763 !important;
}
.share-buttons.bottom .share-reddit {
background-color: #ff5700;
background-image: url("/graphics/services/reddit_white.png");
}
.share-buttons.bottom .share-reddit:hover {
background-color: #dd3500 !important;
}
.share-buttons.bottom .share-gnusocial {
background-color: #a22430;
background-image: url("/graphics/services/gnusocial_white.png");
}
.share-buttons.bottom .share-gnusocial:hover {
background-color: #850713 !important;
}
.share-buttons .share-mastodon {
background-color: #2b90d9;
background-image: url("/graphics/services/mastodon_white.png");
}
.share-buttons .share-mastodon:hover {
background-color: #1060a9 !important;
}
.share-buttons.bottom .share-hnews {
background-color: #ff6600;
background-image: url("/graphics/services/hackernews_white.png");
}
.share-buttons.bottom .share-hnews:hover {
background-color: #dd3500 !important;
}
.share-buttons.bottom .share-rss {
background-color: #f4a000;
background-image: url("/graphics/services/rss_white.png");
}
.share-buttons.bottom .share-rss:hover {
background-color: #f78200 !important;
}
.share-buttons.bottom .share-mail {
background-color: #6e6e6e;
background-image: url("/graphics/services/mail_white.png");
}
.share-buttons.bottom .share-mail:hover {
background-color: #272727 !important;
}
/* Share buttons form layout and behaviour hacks */
.share-buttons input[type="radio"],
.share-buttons input[type="radio"] + span,
.share-buttons input[type="checkbox"],
.share-buttons input[type="checkbox"] + span {
display: none;
}
.share-buttons input[type="checkbox"] + span {display: none;}
.share-buttons input[type="radio"]:checked + span,
.share-buttons input[type="checkbox"]:checked + span {
position: absolute;
margin-top: 3.5em;
margin-left: -10em;
margin-top: 3.5em; margin-left: -10em;
padding: .5em;
z-index: 3;
background-color: #333;
border-radius: .5em;
display: inline-block;
}
.share-buttons input[type="radio"]:checked + span:before,
.share-buttons input[type="checkbox"]:checked + span:before {
content: '';
position: absolute;
top: -1em;
height: 0em;
width: 0em;
height: 0em; width: 0em;
border-bottom: 1em solid #333;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
z-index: 3;
}
.share-buttons input[type="radio"] + span > * {
vertical-align: middle;
}
.share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
.share-buttons input[type="radio"] + span > button {
margin: 2.5px 0 2.5px 5px;
min-width: 4em;
@@ -971,13 +964,9 @@ form.thankyou {
font-size: 1em;
line-height: normal;
}
.share-buttons input[type="radio"] + span > label {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
background-color: rgba(0, 0, 0, .5);
}
@@ -991,62 +980,3 @@ form.share-buttons {
video#freeyourandroid {
max-width:500px;
}
.news-sidebar {
// there is no sidebar on mobile
display: none;
}
@media (min-width: @screen-md-min) {
.news-sidebar {
display: block;
padding-top: 5.1rem;
}
.news-follow-us {
display: none;
}
}
.more-news {
display: flex;
justify-content: space-between;
margin-top: 2rem;
a.learn-more {
font-size: 1.3em;
font-weight: bold;
white-space: nowrap;
}
}
#formnl {
#submit {
.btn;
.btn-lg;
.btn-block;
.btn-primary;
font-size: 1.4em;
margin-bottom: 5px;
}
}
.home-order-image-container {
display: block;
margin-bottom: 10px;
text-align: center;
.home-order-image {
width: 80%;
}
}
.home-shop-block {
margin-bottom: 50px;
}
.home-newsletter-label {
margin-top: 30px;
}

8
look/fsfe.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
look/style.less
View File

@@ -152,7 +152,7 @@ div#subpages, .grid-row {
}
#menu {
@media (min-width: @screen-xs) {
@media (min-width: @screen-sm) {
.pull-right;
text-align: right;
}
@@ -176,7 +176,7 @@ div#subpages, .grid-row {
}
}
@media (min-width: @screen-xs) {
@media (min-width: @screen-sm) {
#direct-to-menu-list {
visibility: hidden;
display: none;
@@ -954,7 +954,7 @@ div#subpages, .grid-row {
margin: 1em 0 0;
li {
.make-xs-column(6);
.make-xs-column(12);
.make-sm-column(4);
.make-md-column(2);
margin-top: 1em;

4
look/valentine.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
scripts/bootstrap-3.0.3.custom.js vendored
View File

@@ -335,3 +335,23 @@
})
}(jQuery);
/**
* FSFE custom slide toggle for the mobile menu.
*/
$(document).ready(function() {
if ($(window).width() < 768) {
$('#menu-list').hide();
}
$('#direct-to-menu-list').on('click', function(e) {
e.preventDefault();
$('#menu-list').stop(true, true).slideToggle();
});
$(window).on('resize', function() {
if ($(window).width() >= 768) {
$('#menu-list').show();
}
});
});