dslak
/
ordine_farmacisti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix responsiveness

develop
Carmine De Rosa 8 years ago
parent
3c03c2a557
commit
ec257185ac
22 changed files with 197 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 128
      css/styles.css
  2. 2
      home.php
  3. 5
      js/scripts.js
  4. 2
      menu-left.php
  5. 2
      menu-right.php
  6. 22
      notizie.php
  7. BIN
      scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/homepage.scssc
  8. BIN
      scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/news.scssc
  9. BIN
      scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/sections.scssc
  10. BIN
      scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc
  11. BIN
      scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc
  12. BIN
      scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc
  13. BIN
      scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/navigation.scssc
  14. BIN
      scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc
  15. 3
      scss/global.scss
  16. 8
      scss/header.scss
  17. 3
      scss/main.scss
  18. 29
      scss/navigation.scss
  19. 18
      scss/sections/homepage.scss
  20. 39
      scss/sections/news.scss
  21. 3
      scss/sections/sections.scss
  22. 2
      scss/variables.scss

128
css/styles.css
View File

@ -14497,14 +14497,14 @@ a:hover {
/* line 21, global.scss */ /* line 21, global.scss */
.box { .box {
background: #eceeef;
background: #d1efb5;
border-radius: 3px; border-radius: 3px;
} }
/* line 26, global.scss */ /* line 26, global.scss */
.container { .container {
width: 100%; width: 100%;
max-width: 1280px;
max-width: 1366px;
padding: 0 20px; padding: 0 20px;
} }
@ -14585,7 +14585,6 @@ a:hover {
/* line 99, global.scss */ /* line 99, global.scss */
#map { #map {
width: 100%; width: 100%;
/* height: 150px; */
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
@ -14766,32 +14765,34 @@ header .breadcrumb {
font-size: 0.75rem; font-size: 0.75rem;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
/* background-color: $light-grey; */
background-color: #d1efb5;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 70px; top: 70px;
color: #aaa;
color: #666;
height: 30px; height: 30px;
z-index: 1;
} }
/* line 107, header.scss */
/* line 108, header.scss */
header .breadcrumb .container { header .breadcrumb .container {
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
} }
/* line 111, header.scss */
/* line 112, header.scss */
header .breadcrumb .container .crumbs { header .breadcrumb .container .crumbs {
height: 20px; height: 20px;
display: ruby; display: ruby;
} }
/* line 114, header.scss */
/* line 115, header.scss */
header .breadcrumb .container .crumbs a { header .breadcrumb .container .crumbs a {
color: #aaa;
color: #4e984a;
text-decoration: none; text-decoration: none;
transition: .4s; transition: .4s;
cursor: pointer;
} }
/* line 118, header.scss */
/* line 120, header.scss */
header .breadcrumb .container .crumbs a:hover { header .breadcrumb .container .crumbs a:hover {
color: #666; color: #666;
} }
@ -14800,12 +14801,14 @@ header .breadcrumb .container .crumbs a:hover {
.dropdown { .dropdown {
border-top: 3px solid #71986e; border-top: 3px solid #71986e;
border-bottom: 3px solid #71986e; border-bottom: 3px solid #71986e;
background: #d1efb5;
border-top: 3px solid #4e984a;
border-bottom: 3px solid #4e984a;
border-radius: 3px; border-radius: 3px;
margin-bottom: 4px; margin-bottom: 4px;
background: #eceeef;
transition: .4s; transition: .4s;
} }
/* line 11, navigation.scss */
/* line 15, navigation.scss */
.dropdown .title { .dropdown .title {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: bold; font-weight: bold;
@ -14814,10 +14817,11 @@ header .breadcrumb .container .crumbs a:hover {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background: #71986e; background: #71986e;
background: #4e984a;
color: white; color: white;
transition: .4s; transition: .4s;
} }
/* line 22, navigation.scss */
/* line 27, navigation.scss */
.dropdown .title:after { .dropdown .title:after {
content: '\f105'; content: '\f105';
font-family: 'FontAwesome'; font-family: 'FontAwesome';
@ -14825,23 +14829,23 @@ header .breadcrumb .container .crumbs a:hover {
right: 10px; right: 10px;
transition: .4s; transition: .4s;
} }
/* line 33, navigation.scss */
/* line 38, navigation.scss */
.dropdown:hover { .dropdown:hover {
border-top: 3px solid #4e984a; border-top: 3px solid #4e984a;
border-bottom: 3px solid #4e984a; border-bottom: 3px solid #4e984a;
} }
/* line 36, navigation.scss */
/* line 41, navigation.scss */
.dropdown:hover .title { .dropdown:hover .title {
background: #4e984a; background: #4e984a;
} }
/* line 41, navigation.scss */
/* line 46, navigation.scss */
.dropdown .items { .dropdown .items {
overflow: hidden; overflow: hidden;
height: 0px; height: 0px;
padding: 0 10px; padding: 0 10px;
margin: 0; margin: 0;
} }
/* line 47, navigation.scss */
/* line 52, navigation.scss */
.dropdown .items li { .dropdown .items li {
font-size: 0.75rem; font-size: 0.75rem;
text-align: left; text-align: left;
@ -14849,40 +14853,60 @@ header .breadcrumb .container .crumbs a:hover {
padding: 10px 0; padding: 10px 0;
list-style: none; list-style: none;
} }
/* line 54, navigation.scss */
/* line 59, navigation.scss */
.dropdown .items li a { .dropdown .items li a {
color: #666; color: #666;
text-decoration: none; text-decoration: none;
transition: .4s; transition: .4s;
cursor: pointer; cursor: pointer;
} }
/* line 59, navigation.scss */
/* line 64, navigation.scss */
.dropdown .items li a:hover { .dropdown .items li a:hover {
color: #aaa; color: #aaa;
} }
/* line 63, navigation.scss */
/* line 68, navigation.scss */
.dropdown .items li:last-child { .dropdown .items li:last-child {
border-bottom: none; border-bottom: none;
} }
/* line 70, navigation.scss */
/* line 75, navigation.scss */
.dropdown.active { .dropdown.active {
border-top: 3px solid #4e984a; border-top: 3px solid #4e984a;
border-bottom: 3px solid #4e984a; border-bottom: 3px solid #4e984a;
} }
/* line 74, navigation.scss */
/* line 79, navigation.scss */
.dropdown.active .title { .dropdown.active .title {
background: #4e984a; background: #4e984a;
} }
/* line 76, navigation.scss */
/* line 81, navigation.scss */
.dropdown.active .title:after { .dropdown.active .title:after {
transform: rotate(90deg); transform: rotate(90deg);
} }
/* line 80, navigation.scss */
/* line 85, navigation.scss */
.dropdown.active .items { .dropdown.active .items {
height: auto; height: auto;
} }
/* line 1, homepage.scss */
/* line 94, navigation.scss */
.pages {
text-align: center;
}
/* line 96, navigation.scss */
.pages a {
display: inline-block;
background: #d1efb5;
font-weight: bold;
border-radius: 3px;
margin: 4px;
color: #4e984a;
padding: 4px 8px;
}
/* line 105, navigation.scss */
.pages a:hover, .pages a.selected {
color: white;
background: #4e984a;
}
/* line 1, sections/homepage.scss */
.banner, .banner,
.spot { .spot {
height: 150px; height: 150px;
@ -14890,16 +14914,16 @@ header .breadcrumb .container .crumbs a:hover {
position: relative; position: relative;
padding: 5px; padding: 5px;
} }
/* line 9, homepage.scss */
/* line 9, sections/homepage.scss */
.banner .content, .banner .content,
.spot .content { .spot .content {
background: #eceeef;
background: #d1efb5;
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 3px; border-radius: 3px;
} }
/* line 16, homepage.scss */
/* line 16, sections/homepage.scss */
.banner .content .title, .banner .content .title,
.spot .content .title { .spot .content .title {
position: absolute; position: absolute;
@ -14914,7 +14938,7 @@ header .breadcrumb .container .crumbs a:hover {
z-index: 1; z-index: 1;
text-transform: uppercase; text-transform: uppercase;
} }
/* line 30, homepage.scss */
/* line 30, sections/homepage.scss */
.banner .content img, .banner .content img,
.spot .content img { .spot .content img {
position: absolute; position: absolute;
@ -14926,60 +14950,84 @@ header .breadcrumb .container .crumbs a:hover {
object-position: center; object-position: center;
transition: .4s; transition: .4s;
} }
/* line 44, homepage.scss */
/* line 44, sections/homepage.scss */
.banner:hover .content img, .banner:hover .content img,
.spot:hover .content img { .spot:hover .content img {
transform: scale(1.2); transform: scale(1.2);
} }
/* line 53, homepage.scss */
/* line 53, sections/homepage.scss */
.banner { .banner {
height: 90px; height: 90px;
margin-bottom: 4px; margin-bottom: 4px;
padding: 0; padding: 0;
} }
/* line 59, homepage.scss */
/* line 59, sections/homepage.scss */
.contacts { .contacts {
padding: 15px 25px; padding: 15px 25px;
font-size: 0.75rem; font-size: 0.75rem;
} }
/* line 62, homepage.scss */
/* line 62, sections/homepage.scss */
.contacts .fa { .contacts .fa {
color: #4e984a; color: #4e984a;
width: 25px; width: 25px;
font-size: 1rem; font-size: 1rem;
height: 25px; height: 25px;
} }
/* line 68, homepage.scss */
/* line 68, sections/homepage.scss */
.contacts b { .contacts b {
color: #4e984a; color: #4e984a;
} }
/* line 73, homepage.scss */
/* line 2, sections/news.scss */
.last-news { .last-news {
font-size: 0.75rem; font-size: 0.75rem;
} }
/* line 75, homepage.scss */
/* line 4, sections/news.scss */
.last-news .item { .last-news .item {
border-bottom: 1px solid #eceeef;
border-bottom: 1px solid #d1efb5;
padding: 8px 10px; padding: 8px 10px;
} }
/* line 78, homepage.scss */
/* line 7, sections/news.scss */
.last-news .item .date { .last-news .item .date {
color: #aa0000; color: #aa0000;
} }
/* line 81, homepage.scss */
/* line 10, sections/news.scss */
.last-news .item a { .last-news .item a {
color: #666; color: #666;
text-decoration: none; text-decoration: none;
transition: .4s; transition: .4s;
} }
/* line 85, homepage.scss */
/* line 14, sections/news.scss */
.last-news .item a:hover { .last-news .item a:hover {
color: black; color: black;
} }
/* line 21, sections/news.scss */
.news {
font-size: 0.75rem;
}
/* line 23, sections/news.scss */
.news .item {
border-bottom: 1px solid #d1efb5;
padding: 8px 10px;
}
/* line 26, sections/news.scss */
.news .item .date {
color: #aa0000;
}
/* line 29, sections/news.scss */
.news .item a {
color: #666;
text-decoration: none;
transition: .4s;
}
/* line 33, sections/news.scss */
.news .item a:hover {
color: black;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
/* line 5, mediaqueries/viewports/_768up.scss */ /* line 5, mediaqueries/viewports/_768up.scss */
header { header {

2
home.php
View File

@ -32,7 +32,7 @@
</div> </div>
<div class="col-12 my-2"> <div class="col-12 my-2">
<p class="text-right"><a class="font-12" href="">Vai a tutte le news <i class="fa fa-angle-right"></i></a></p>
<p class="text-right"><a class="font-12" href="<?php echo $BASE_URL;?>/notizie">Vai a tutte le news <i class="fa fa-angle-right"></i></a></p>
</div> </div>
</div> </div>

5
js/scripts.js
View File

@ -1,6 +1,11 @@
$(document).ready(function(){ $(document).ready(function(){
if($(window).width() < 1024 && $(window).width() >= 768){
$('#menuRight .banner').clone().appendTo('#menuLeft');
$('#menuRight').empty();
}
$('.hamburger').on('click', function(){ $('.hamburger').on('click', function(){
$(this).toggleClass('is-active'); $(this).toggleClass('is-active');

2
menu-left.php
View File

@ -1,5 +1,5 @@
<div class="col-12 col-sm-3 col-md-2 p-0">
<div id="menuLeft" class="col-12 col-sm-3 col-md-2 p-0">
<div class="dropdown active"> <div class="dropdown active">
<div class="title">Area Riservata</div> <div class="title">Area Riservata</div>

2
menu-right.php
View File

@ -1,5 +1,5 @@
<div class="col-12 col-sm-12 col-md-2 p-0">
<div id="menuRight" class="col-12 col-sm-12 col-md-2 p-0">
<div class="banner"> <div class="banner">
<div class="content"> <div class="content">
<a href="#"> <a href="#">

22
notizie.php
View File

@ -0,0 +1,22 @@
<div class="row news">
<div class="col-12">
<div class="section-title">Ultime notizie</div>
<p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
<p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
<p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
<p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
</div>
<div class="col-12 my-2 pages">
<a class="font-12 selected" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
<a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
</div>
</div>

BIN
scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/homepage.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/news.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/094858d67900945e1547c8ced88b84162c32e28d/sections.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/navigation.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc
View File

Binary file not shown.

3
scss/global.scss
View File

@ -25,7 +25,7 @@ a{
.container{ .container{
width: 100%; width: 100%;
max-width: 1280px;
max-width: 1366px;
padding: 0 20px; padding: 0 20px;
} }
@ -98,7 +98,6 @@ a{
#map{ #map{
width: 100%; width: 100%;
/* height: 150px; */
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;

8
scss/header.scss
View File

@ -95,14 +95,15 @@ header{
font-size: $font-12; font-size: $font-12;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
/* background-color: $light-grey; */
background-color: $light-grey;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 70px; top: 70px;
color: $grey;
color: $dark-grey;
height: 30px; height: 30px;
z-index: 1;
.container{ .container{
overflow: hidden; overflow: hidden;
@ -112,9 +113,10 @@ header{
height: 20px; height: 20px;
display: ruby; display: ruby;
a{ a{
color: $grey;
color: $green;
text-decoration: none; text-decoration: none;
transition: .4s; transition: .4s;
cursor: pointer;
&:hover{ &:hover{
color: $dark-grey; color: $dark-grey;
} }

3
scss/main.scss
View File

@ -12,7 +12,8 @@
@import "forms"; @import "forms";
@import "header"; @import "header";
@import "navigation"; @import "navigation";
@import "homepage";
@import "sections/sections";

29
scss/navigation.scss
View File

@ -3,9 +3,13 @@
.dropdown{ .dropdown{
border-top: 3px solid $light-green; border-top: 3px solid $light-green;
border-bottom: 3px solid $light-green; border-bottom: 3px solid $light-green;
background: $light-grey;
border-top: 3px solid $green;
border-bottom: 3px solid $green;
border-radius: 3px; border-radius: 3px;
margin-bottom: 4px; margin-bottom: 4px;
background: $light-grey;
transition: .4s; transition: .4s;
.title{ .title{
@ -16,6 +20,7 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background: $light-green; background: $light-green;
background: $green;
color: white; color: white;
transition: .4s; transition: .4s;
@ -82,3 +87,25 @@
} }
} }
} }
.pages{
text-align: center;
a{
display: inline-block;
background: $light-grey;
font-weight: bold;
border-radius: 3px;
margin: 4px;
color: $green;
padding: 4px 8px;
&:hover,
&.selected{
color: white;
background: $green;
}
}
}

18
scss/homepage.scss → scss/sections/homepage.scss
View File

@ -70,22 +70,4 @@
} }
} }
.last-news{
font-size: $font-12;
.item{
border-bottom: 1px solid $light-grey;
padding: 8px 10px;
.date{
color: $red;
}
a{
color: $dark-grey;
text-decoration: none;
transition: .4s;
&:hover{
color: black;
}
}
}
}

39
scss/sections/news.scss
View File

@ -0,0 +1,39 @@
.last-news{
font-size: $font-12;
.item{
border-bottom: 1px solid $light-grey;
padding: 8px 10px;
.date{
color: $red;
}
a{
color: $dark-grey;
text-decoration: none;
transition: .4s;
&:hover{
color: black;
}
}
}
}
.news{
font-size: $font-12;
.item{
border-bottom: 1px solid $light-grey;
padding: 8px 10px;
.date{
color: $red;
}
a{
color: $dark-grey;
text-decoration: none;
transition: .4s;
&:hover{
color: black;
}
}
}
}

3
scss/sections/sections.scss
View File

@ -0,0 +1,3 @@
@import "homepage";
@import "news";

2
scss/variables.scss
View File

@ -71,5 +71,5 @@ $green: #4e984a;//#67a562;
$light-green: #71986e;//#2e981e;//#58984e; $light-green: #71986e;//#2e981e;//#58984e;
$red: #aa0000; $red: #aa0000;
$grey: #aaa; $grey: #aaa;
$light-grey: #eceeef;
$light-grey: #d1efb5;
$dark-grey: #666; $dark-grey: #666;

Write Preview
Loading…
Cancel
Save