Responsive fixes

This commit is contained in:
nikolark committed 2014-07-08 13:27:42 +02:00
1 parent 88768266bb
commit 30b218bb84
6 files changed
+120 -2989

No files matched your search

+1
View File
@@ -9,5 +9,6 @@
- [ ] link to calendars (add to own calendar)
- [ ] custom colors for popular categories
- [ ] more UX/graphical design
- [ ] blokk font for ajax loaded contents
- [ ] relative dates and times
- [ ] profile-cards
@@ -56,7 +56,7 @@ jQuery(document).ready(function() {
$('#menu [data-toggle-menu]').on('click', function(e) {
e.preventDefault();
// add open css class
var menu = $('#menu .main-menu, #menu .user-menu-wrap');
var menu = $('#menu .main-menu, #menu .user-menu-wrap, #menu .user-menu');
menu.toggleClass('visible');
});
+115 -40
View File
@@ -9,7 +9,7 @@ $primary-color: darken(#E99835, 5%);
$secondary-color: #008CBA;
$label-bg-color: #FF1F00;
$site-header-bg-color: #FDF9F2;
$site-header-bg-color: #333;
@import "foundation/components/global";
@@ -17,6 +17,9 @@ $site-header-bg-color: #FDF9F2;
$table-head-padding: rem-calc(10 16 9);
$table-row-padding: rem-calc(12 16);
$row-width: rem-calc(1250);
$column-gutter: rem-calc(30);
@import "foundation/components/grid";
@import "foundation/components/block-grid";
@import "foundation/components/visibility";
@@ -51,35 +54,20 @@ $menu-padding: rem-calc(18);
display: block;
padding-top: $menu-padding;
padding-bottom: $menu-padding;
color: white;
&:hover {
color: darken(white, 10%);
}
}
}
}
#menu {
@include grid-column(9);
text-transform: uppercase;
font-weight: 600;
.menu-toggle {
position: absolute;
right: rem-calc(16);
top: rem-calc(14);
@media #{$large-up} {
display: none;
}
svg {
width: 32px;
height: 24px;
}
g {
fill: $primary-color;
}
&:hover g {
fill: darken($primary-color, 5%);
a {
color: white;
&:hover {
color: darken(white, 10%);
}
}
ul {
@@ -125,17 +113,21 @@ $menu-padding: rem-calc(18);
position: absolute;
top: 0;
right: rem-calc(16);
margin-top: rem-calc(5);
margin-top: rem-calc(6);
&:hover .profile-badge {
background-color: darken(white, 3%);
}
}
.profile-badge {
display: block;
height: 40px;
height: rem-calc(40);
text-align: right;
@media #{$large-up} {
background-color: #fff;
border-radius: 50px;
border-radius: rem-calc(50);
//@extend .card-z1;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 0px 0px, rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
@@ -158,21 +150,29 @@ $menu-padding: rem-calc(18);
display: none;
background-color: white;
overflow: hidden;
padding: 0 rem-calc(16);
font-size: rem-calc(14);
margin-top: rem-calc(5);
margin-top: rem-calc(7);
//@extend .card-z1;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 0px 0px, rgba(0,0,0,0.09804) 0px 1px 2px 0px;
a {
color: #333;
&:hover {
background-color: darken(white, 3%);
}
}
}
li a {
padding-top: $menu-padding;
padding-bottom: $menu-padding;
@media #{$large-up} {
padding-left: rem-calc(16);
padding-right: rem-calc(16);
}
}
}
&:hover .user-menu {
display: block;
}
.icon-down {
display: none;
@media #{$large-up} { display: inline-block; }
@@ -188,7 +188,33 @@ $menu-padding: rem-calc(18);
display: inline-block;
padding-left: rem-calc(10);
@media #{$large-up} { padding: 0 rem-calc(10); }
@media #{$large-up} {
padding: 0 rem-calc(10);
color: #333;
}
}
}
.menu-toggle {
position: absolute;
right: rem-calc(16);
top: rem-calc(14);
@media #{$large-up} {
display: none;
}
svg {
width: 32px;
height: 24px;
}
g {
fill: white;
}
&:hover g {
fill: darken(white, 10%);
}
}
}
@@ -281,6 +307,8 @@ $menu-padding: rem-calc(18);
.login-form {
@include grid-column(12);
@extend .card;
@media #{$medium-up} { max-width: 400px; }
.login-remember {
display: inline-block;
@@ -333,27 +361,46 @@ input[type=submit]{
/* Sidebar */
.sidebar {
@include grid-column(12);
@include grid-column(12, $collapse:true);
@media #{$large-up} {
@include grid-column(4);
font-weight: 300;
}
font-weight: 300;
font-weight: 500;
padding-top: rem-calc(16);
h2 {
padding-left: rem-calc(16);
padding-right: rem-calc(16);
@media #{$large-up} {
padding-left: rem-calc(0);
padding-right: rem-calc(0);
}
}
h2,
h2 a.rsswidget {
font-size: rem-calc(22);
font-weight: 700;
font-size: rem-calc(20);
font-weight: 600;
margin-bottom: 0;
}
h2 a.rsswidget {
font-weight: normal;
}
ul {
margin-bottom: rem-calc(16);
}
.searchform {
margin-bottom: rem-calc(50);
padding-left: rem-calc(16);
padding-right: rem-calc(16);
@media #{$large-up} {
padding-left: rem-calc(0);
padding-right: rem-calc(0);
}
input[type=text] {
width: auto;
width: 75%;
margin: 0;
display: block;
float: left;
@@ -369,6 +416,7 @@ input[type=submit]{
border: none;
display: block;
float: left;
width: 25%;
}
}
.widgettitle {
@@ -382,9 +430,36 @@ input[type=submit]{
}
a.rsswidget,
.rss-date,
li.recentcomments {
li.recentcomments a {
font-size: rem-calc(14);
}
ul {
list-style: none;
padding: 0;
margin: 0;
@media #{$large-up} {
list-style: disc outside none;
}
li {
display: block;
padding: rem-calc(16);
&:nth-child(even) {
background-color: #f5f5f5;
@media #{$large-up} {
background-color: transparent;
}
}
@media #{$large-up} {
display: list-item;
padding: 0;
margin-left: rem-calc(20);
}
}
}
}
/* Reusable styles */
+1 -1
View File
@@ -1 +1 @@
"use strict";function format_posts(t){var e="",n=0;if(0===t.length)return"";for(e+='<thead><tr class="fadein"><th width="53%">Arrangement</th><th>Sted</th><th>Tid</th></tr></thead>',n=0;n<t.length;n++){var r=t[n];e+='<tr class="fadein">',e+='<td class="entry-title"><a href="'+r.url+'">'+r.title+"</a></td>",e+='<td class="entry-venue">'+r.custom_fields._neuf_events_venue+"</td>",e+='<td class="entry-starttime">'+moment.unix(r.custom_fields._neuf_events_starttime).utc().format("DD. MMMM YYYY, HH.mm")+"</td></tr>"}return e}var program_endpoint="https://studentersamfundet.no/api/events/get_upcoming/",query_params={count:10},entrypoint=".program-list";jQuery(document).ready(function(){moment.lang("nb");var t=jQuery;t.getJSON(program_endpoint+"?callback=?",query_params,function(e){if(e&&e.events){var n=format_posts(e.events);t(entrypoint).html(n)}}),t("#menu [data-toggle-menu]").on("click",function(e){e.preventDefault();var n=t("#menu .main-menu, #menu .user-menu-wrap");n.toggleClass("visible")}),t("[data-toggle-introduction]").on("click",function(){t(this).parent().fadeOut(600),t.cookie("introduction-dismissed","1")}),"1"!==t.cookie("introduction-dismissed")&&(t(".introduction").show(),t(".introduction").addClass("fadein"))});
"use strict";function format_posts(t){var e="",n=0;if(0===t.length)return"";for(e+='<thead><tr class="fadein"><th width="53%">Arrangement</th><th>Sted</th><th>Tid</th></tr></thead>',n=0;n<t.length;n++){var r=t[n];e+='<tr class="fadein">',e+='<td class="entry-title"><a href="'+r.url+'">'+r.title+"</a></td>",e+='<td class="entry-venue">'+r.custom_fields._neuf_events_venue+"</td>",e+='<td class="entry-starttime">'+moment.unix(r.custom_fields._neuf_events_starttime).utc().format("DD. MMMM YYYY, HH.mm")+"</td></tr>"}return e}var program_endpoint="https://studentersamfundet.no/api/events/get_upcoming/",query_params={count:10},entrypoint=".program-list";jQuery(document).ready(function(){moment.lang("nb");var t=jQuery;t.getJSON(program_endpoint+"?callback=?",query_params,function(e){if(e&&e.events){var n=format_posts(e.events);t(entrypoint).html(n)}}),t("#menu [data-toggle-menu]").on("click",function(e){e.preventDefault();var n=t("#menu .main-menu, #menu .user-menu-wrap, #menu .user-menu");n.toggleClass("visible")}),t("[data-toggle-introduction]").on("click",function(){t(this).parent().fadeOut(600),t.cookie("introduction-dismissed","1")}),"1"!==t.cookie("introduction-dismissed")&&(t(".introduction").show(),t(".introduction").addClass("fadein"))});
File diff suppressed because it is too large. Load diff
+1 -1
View File
@@ -15,7 +15,7 @@
$grav_url = "https://www.gravatar.com/avatar/" . md5( strtolower( trim( $user->user_email ) ) ) . "?d=" . urlencode( $default ) . "&s=" . $size;
?>
<div class="user-menu-wrap">
<a href="#" class="profile-badge"><img src="<?php echo $grav_url; ?> " class="profile-picture" /><span class="profile-inner"><?php echo $user->user_firstname." ".$user->user_lastname; ?> <i class="icon-down">&#x25B6;</i></span></a>
<a href="#" class="profile-badge" data-toggle-menu><img src="<?php echo $grav_url; ?> " class="profile-picture" /><span class="profile-inner"><?php echo $user->user_firstname." ".$user->user_lastname; ?> <i class="icon-down">&#x25B6;</i></span></a>
<ul class="user-menu">
<li><a href="<?php echo "/profil/" ?>">Profil</a></li>
<li><a href="<?php echo wp_logout_url("/"); ?>">Logg ut</a></li>