nicolas/blog_perso_app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new design

Browse Source
This commit is contained in:
Nicolas Bally 2015-04-11 16:01:51 +02:00
parent fbe51d20a4
commit dfe98283b5
14 changed files with 141 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/public.js.coffee
View File

@ -1,9 +1,9 @@
#= require ./shared/jquery.js #= require jquery
#= require jquery_ujs #= require jquery_ujs
#=require ./popover
$ -> $ ->

26
app/assets/stylesheets/public.scss
View File

@ -4,30 +4,32 @@
@import "shared/superfish"; @import "shared/superfish";
@import "css3-mixins.scss"; @import "css3-mixins.scss";
@import "public/layout"; @import "public/layout";
@import "public/articles"; //@import "public/articles";
@import "qi_grids";
@import "popover";
img{
max-width:100%;
}
body{ body{
padding:0; padding:0;
margin:0; margin:0;
font-family:"museo-sans", serif; font-family:"freight-text-pro", serif;
font-weight:500; font-weight:500;
font-size:15px; font-size:17px;
line-height:1.6em;
} }
p{
line-height:1.4em;
}
strong{
font-weight:700;
}
h1,h2,h3,h4{ h1,h2,h3,h4{
font-weight:normal; font-weight:normal;
font-family:lato; font-family:"Lato";
a{ a{
color:#1e1e1e; color:#1e1e1e;
@ -72,10 +74,6 @@ aside{
} }
.article_infos{
margin-bottom:1em;
}
.read{ .read{

8
app/assets/stylesheets/public/articles.css.scss
View File

@ -1,11 +1,4 @@
.widget{
h2{
font-family : "DanielRegular";
}
}
.read{ .read{
display:block; display:block;
@ -87,3 +80,4 @@
margin-bottom:1em; margin-bottom:1em;
} }

484
app/assets/stylesheets/public/layout.css.scss
View File

@ -1,20 +1,30 @@
body{ body{
padding:0px; padding:0px;
background: url('/assets/front/fond.jpg'); background: rgba(250,250,250,1);
background-size:100%;
color: #333;
}
#gradient{
} }
header#top{ header#top{
display:block; display:block;
.center{
max-width:1200px;
margin:auto;
}
background: url('/assets/front/top.png') repeat-x; background: url('/assets/front/top.png') repeat-x;
img{ img{
width:120px; width:120px;
float:left; float:left;
margin:20px 50px; margin:20px 0px;
} }
} }
@ -41,59 +51,42 @@ navigation#first_nav{
#main{ #main{
max-width:1200px;
header{ margin:auto;
h1{
margin-bottom:10px;
}
h2{
margin-top:0em;
margin-bottom:1em;
}
}
img{ img{
max-width:100%; max-width:100%;
} }
article{
margin-bottom:3em;
border-top:2px solid #97bc4a;
padding-top:1em !important;
aside{
img{
display:none;
}
*{
display:inline;
}
} }
#corps{
background:white;
padding:40px;
float:left;
width:70%;
box-sizing: border-box;
} }
} .article_corps{
background:white;
}
#sidebar{ #sidebar{
padding:0% 2%; padding:20px;
margin-left:70%;
box-sizing: border-box;
background:#97bc4a;
img{ img{
margin:0.5em 0; margin:0.5em 0;
} }
color:white;
h3,a{
color:white;
}
} }
@ -144,405 +137,10 @@ footer{
@media only screen and (min-width: 0px) { //@media only screen and (min-width: 0px) {
header#top{
img{
width:120px;
margin:20px 5%;
}
}
#main{
margin:auto;
max-width:800px;
width:90%;
}
#sidebar{
margin:auto;
padding:2% !important;
max-width:800px;
width:86%;
img{
margin:0.5em 0;
max-width:98%;
}
}
.img_with_legend{
position:relative;
figcaption{
margin-top:5px;
}
}
}
@media only screen and (min-width: 769px) {
#main{
margin-left:2%;
max-width:800px;
width:69%;
float:left;
padding:0px;
article{
padding:0px 6%;
}
}
#sidebar{
float:right;
width:23%;
padding-top:0px !important;
min-height:1000px;
img{
max-width:100%;
margin:0.5em 0;
}
}
}
@media only screen and (min-width: 950px) {
#main{
margin-left:5%;
width:64%;
}
}
@media only screen and (min-width: 1200px) {
#main{
margin-left:18%;
width:53%;
}
#sidebar{
padding-top:0em !important;
}
article{
position:relative;
aside{
display:block;
position:absolute;
left : -39%;
top:-2px;
padding-top:0em;
line-height:1.6em;
width:42%;
text-align:center;
p{
margin:0px;
display:block !important;
}
img{
display:block !important;
margin:auto;
border-radius:50%;
}
time{
display:block;
}
*{
text-align:center;
}
}
}
.img_with_legend{
position:relative;
figcaption{
display:block;
position:absolute;
left : -35%;
width:32%;
top:10px;
*{
text-align:right;
}
}
}
}
#comments{
.comment{
margin-bottom:3em;
aside{
img{
float:left;
margin:auto;
border-radius:50%;
}
}
blockquote{
text-align:justify !important;
border-color : #97bc4a;
min-height:3em;
padding-right:0px;
p{
text-align:justify !important;
}
}
.header, blockquote{
margin-left:100px;
}
.header{
font-size: 0.95em;
line-height:1.6em;
img{
display:none;
}
}
}
}
#comment_form{
background:#e4f1d5;
background-color:rgba(127,182,55,0.2);
padding:20px;
padding-bottom:35px;
margin:0px 0px 0px 0px;
h3{
margin-top:0px;
text-transform:uppercase;
}
input,textarea{
background:white;
background-color:rgba(255,255,255,0.8);
padding:1%;
}
textarea{
line-height:1.6em;
}
label{
display:inline-block;
min-width:90px;
padding:5px;
}
.submit{
float:right;
@include border-radius(10px);
margin-top:-16px;
cursor:pointer;
&:hover{
background:#97bc4a;
color:white;
}
padding:1% 2%;
}
}
//iPhone
@media only screen and (max-width: 480px) {
body{
font-size:50%;
}
}
@media only screen and (max-width: 320px) {
body{
font-size:75%;
}
}
@media only screen and (max-width: 600px) {
header#top{
text-align:center;
img{
float:none;
display:block;
margin:auto;
}
navigation{
text-align:center;
float:none;
display:block;
margin-top:10px;
}
}
#comment_form{
margin:0px !important;
}
#comments{
.comment{
aside{
img{
float:left;
margin:auto;
border-radius:50%;
width:40px;
height:40px;
}
}
.header, blockquote{
margin-left:50px;
}
blockquote{
margin-left:10px;
}
}
}
}
footer{ footer{
@ -584,3 +182,27 @@ footer{
} }
} }
.article_small{
margin-bottom:20px;
position:relative;
h1{
text-align:center;
}
background:white;
padding:10px;
padding-left:120px;
.img{
width:100px;
position:absolute;
top:10px;
left:10px;
background-size:cover;
}
}

4
app/views/admin/articles/_form.html.haml
View File

@ -4,9 +4,9 @@
=form.input :category_id, :as => :select, :collection => Category.order(:name) =form.input :category_id, :as => :select, :collection => Category.order(:name)
= form.input :enabled,:as => :boolean , :label => "Actif" = form.input :enabled,:as => :boolean , :label => "Actif"
= form.input :published_at, :label => "Date de publication : ",:as => :qi_date_picker = form.input :published_at, :label => "Date de publication : ",:as => :qi_date_picker
= form.input :image_file_id, :label => "Image :" , :as => :qi_image_select
= form.input :title, :label => "Titre :" = form.input :title, :label => "Titre :"
= form.input :title_cached,:as => :boolean , :label => "Titre masqué ?" =# form.input :title_cached,:as => :boolean , :label => "Titre masqué ?"
=# form.input :slug, :label => "Slug :" =# form.input :slug, :label => "Slug :"
= form.input :description, :label => "Description courte :", :as => :text = form.input :description, :label => "Description courte :", :as => :text

12
app/views/layouts/public.html.haml
View File

@ -19,6 +19,7 @@
<script src="//use.typekit.net/siq4hcp.js"></script> <script src="//use.typekit.net/siq4hcp.js"></script>
<script>try{Typekit.load();}catch(e){}</script> <script>try{Typekit.load();}catch(e){}</script>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
=javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false&region=FR"
=render :partial => "public/shared/ga" =render :partial => "public/shared/ga"
%body %body
@ -27,6 +28,7 @@
%header#top %header#top
.center
=link_to image_tag("front/logo.png"), "/" =link_to image_tag("front/logo.png"), "/"
%navigation#first_nav %navigation#first_nav
@ -37,11 +39,13 @@
%p{:style => "clear:both;"} %p{:style => "clear:both;"}
#main=yield
#main
#corps{:class => ("article_corps" if @article)}=yield
%section#sidebar %section#sidebar
=render :partial => "public/articles/sidebar_recents"
%h3=link_to "À propos", "/a-propos-de-nicolas-bally.html"
%h3 Mes activités %h3 Mes activités
@ -51,7 +55,7 @@
%p{:style => "clear:both;height:1px;margin-top:0px;"} .clear
%footer %footer

29
app/views/public/articles/_article.html.haml
View File

@ -1,35 +1,20 @@
%article .article_small
-if article.image_file
=image_tag(article.image_file.file.square.url, :class => "img")
%header
%h3=link_to article.title, article_path(:slug => article.slug), :title => " "+article.title.to_s
%h1=link_to article.title, article_path(:slug => article.slug), :title => "Blog de Nicolas Bally "+article.title.to_s
.article_infos
%p.article_infos
%time.updated{:datetime => Time.now, :pubdate => true} %time.updated{:datetime => Time.now, :pubdate => true}
Publié
="le "+l(article.published_at, :format => :human_date) ="le "+l(article.published_at, :format => :human_date)
="-"
-if article.comments.count == 0
=link_to "Pas de commentaires", article_path(:slug => article.slug, :anchor => "comments")
-elsif article.comments.count == 1
=link_to "1 commentaire", article_path(:slug => article.slug, :anchor => "comments")
-else
=link_to "#{article.comments.count} commentaires", article_path(:slug => article.slug, :anchor => "comments")
.desc
%a{:href => article_path(:slug => article.slug)}= article.description
%a.read{:href => article_path(:slug => article.slug)} Lire la suite
-if article.image_file
%a{:href => article_path(:slug => article.slug)}=image_tag(article.image_file.file.large.medium.url, :alt => "")

21
app/views/public/articles/_article_intro.html.haml
View File

@ -2,34 +2,23 @@
%header %header
%aside
<img src="http://www.gravatar.com/avatar/199574623fb5c99b721233fb31bee19f.png" class="avatar avatar-50 photo" >
%p %p.article_infos
Article de
%strong
Nicolas Bally
%time.updated{:datetime => Time.now, :pubdate => true} %time.updated{:datetime => Time.now, :pubdate => true}
publié
="le "+l(article.published_at, :format => :human_date) ="le "+l(article.published_at, :format => :human_date)
%p{:style => "margin-top:1em;"} ="-"
-if article.comments.count == 0 =link_to i(:"comment-o")+" "+article.comments.count.to_s, article_path(:slug => article.slug, :anchor => "comments")
=link_to "Pas de commentaires", article_path(:slug => article.slug, :anchor => "comments")
-elsif article.comments.count == 1
=link_to "1 commentaire", article_path(:slug => article.slug, :anchor => "comments")
-else
=link_to "#{article.comments.count} commentaires", article_path(:slug => article.slug, :anchor => "comments")
%h1=link_to article.title, article_path(:slug => article.slug), :title => "blog conseil en image : "+article.title.to_s %h1=link_to article.title, article_path(:slug => article.slug), :title => "blog conseil en image : "+article.title.to_s
%h2= article.description
=render article.block =render article.block
%hr

6
app/views/public/articles/_sidebar_recents.html.haml
View File

@ -1,8 +1,4 @@
.recents.widget .recents.widget
%h3 Articles récents %h3 Articles récents
%ul =render Article.recents.limit(10)
-Article.recents.limit(10).each do |article|
%li= link_to article.title, article_path(:slug => article.slug),:title => "Blog conseil en image - "+article.title.to_s

3
app/views/public/home/home.html.haml
View File

@ -1,7 +1,8 @@
-if @index_title -if @index_title
%h1=@index_title %h1=@index_title
=render :partial => "public/articles/article", :collection => @articles, :as => "article" =render :partial => "public/articles/article_intro", :collection => @articles, :as => "article"
.clear
#articles_pagination= paginate @articles #articles_pagination= paginate @articles

BIN
public/arrow-next.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/arrow-prev.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/controls.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB