github-migration/engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first attempt to polish the theme assets page + refactor the css (wip)

Browse Source
This commit is contained in:
did 2011-12-03 01:11:31 +01:00
parent 24575d5cff
commit 37684654ac
11 changed files with 329 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
app/assets/stylesheets/locomotive/_box.scss Normal file
View File

@ -0,0 +1,151 @@
@import "compass/css3";
@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "helpers";
@import "buttons";
@mixin box-header {
display: block;
padding: 0 0 0 20px;
margin: 0px;
line-height: 31px;
height: 31px;
border: 1px solid #ccced7;
border-bottom: 0;
@include border-top-radius(8px);
@include background-image(linear-gradient(#ebedf4, #d7dbe7));
}
@mixin box-body {
margin-bottom: 0;
padding: 0;
width: 918px;
border: 1px solid #ccced7;
@include border-bottom-radius(8px);
@include box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset);
background: #ebedf4;
p.no-items {
border: none;
padding: 0;
margin: 0;
background: none;
color: #bdbfc9;
font-weight: bold;
text-align: center;
}
}
@mixin box-inner-list {
margin: 0px;
.empty {
text-align: left;
}
li, .entry, .new-entry {
position: relative;
margin-bottom: 10px;
height: 30px;
line-height: 30px;
padding: 0 10px;
background: #fff;
@include border-radius(16px);
@include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
em {
color: #757575;
font-size: 11px;
font-weight: normal;
}
strong {
color: #17171D;
font-size: 14px;
font-weight: bold;
@include locomotive-link;
}
.editable {
@include editable;
padding-right: 6px;
&:hover {
background-image: none;
}
}
span.inline-errors {
margin-left: 10px;
padding: 2px 3px;
background: #FFE5E5;
color: #CE2525;
font-size: 13px;
}
div.more, span.actions {
position: absolute;
top: 0px;
right: 10px;
color: #8B8D9A;
font-size: 11px;
a.add {
@include gray-button;
padding-left: 10px;
}
a.remove {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 10px;
position: relative;
top: 4px;
outline: none;
background: transparent image-url("locomotive/list/icons/trash_off.png") repeat 0 0;
text-indent: -9999px;
&:hover {
background-image: image-url("locomotive/list/icons/trash.png");
}
}
}
&:last-child {
margin-bottom: 0px;
}
} // li
> hr {
margin: 10px 0px;
height: 1px;
line-height: 1px;
border: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
background: transparent;
}
.new-entry {
}
}

235
app/assets/stylesheets/locomotive/application.scss
View File

@ -3,6 +3,7 @@
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "helpers";
@import "box";
div.notice {
position: relative;
@ -28,6 +29,32 @@ div.notice {
}
}
/* ___ boxes ___ */
#wrapper #content > div.inner .box {
width: 918px;
padding: 0px;
margin-top: 20px;
background: transparent;
h3 {
@include box-header;
}
& > .inner {
@include box-body;
padding: 20px;
width: 876px;
ul {
@include box-inner-list;
}
}
}
/* ___ list ___ */
p.no-items {
@ -47,112 +74,112 @@ p.no-items {
}
}
ul.list {
background: #fff;
list-style: none;
margin: 0px 0 20px 0;
// ul.list {
// background: #fff;
// list-style: none;
// margin: 0px 0 20px 0;
//
// li.item {
// position: relative;
// height: 31px;
// line-height: 31px;
//
// background: #ebedf4;
// @include border-radius(16px);
// @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
//
// margin-bottom: 10px;
// clear: both;
//
// a {
// margin-left: 18px;
// @include hover-link;
//
// font-weight: bold;
// font-size: 14px;
// color: #1F82BC;
// outline: none;
// }
//
// em {
// display: block;
// float: left;
// height: 31px;
// width: 18px;
// }
//
// strong {
// display: block;
// height: 31px;
// margin-left: 18px;
//
// a {
// position: relative;
// top: 2px;
// left: 15px;
//
// text-decoration: none;
// color: #1f82bc;
// font-size: 13px;
// @include single-text-shadow(#fff, 1px, 1px, 1px);
//
// &:hover {
// text-decoration: underline;
// }
// }
// }
//
// &.sortable li strong a { left: 10px; }
//
// div.more {
// position: absolute;
// top: 0px;
// right: 15px;
//
// font-size: 11px;
// color: #8b8d9a;
//
// a {
// position: relative;
// top: 4px;
// margin-left: 10px;
// }
//
// span.handle {
// position: relative;
// top: 5px;
// margin: 0 0 0 15px;
// cursor: move;
// }
// } // li div.more
// } // ul.list li
// }
li.item {
position: relative;
height: 31px;
line-height: 31px;
// ul.theme-assets {
// margin-left: 40px;
//
// li.hidden strong a { font-style: italic; color: #8B8D9A; font-weight: normal; }
// }
background: #ebedf4;
@include border-radius(16px);
@include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
margin-bottom: 10px;
clear: both;
a {
margin-left: 18px;
@include hover-link;
font-weight: bold;
font-size: 14px;
color: #1F82BC;
outline: none;
}
em {
display: block;
float: left;
height: 31px;
width: 18px;
}
strong {
display: block;
height: 31px;
margin-left: 18px;
a {
position: relative;
top: 2px;
left: 15px;
text-decoration: none;
color: #1f82bc;
font-size: 13px;
@include single-text-shadow(#fff, 1px, 1px, 1px);
&:hover {
text-decoration: underline;
}
}
}
&.sortable li strong a { left: 10px; }
div.more {
position: absolute;
top: 0px;
right: 15px;
font-size: 11px;
color: #8b8d9a;
a {
position: relative;
top: 4px;
margin-left: 10px;
}
span.handle {
position: relative;
top: 5px;
margin: 0 0 0 15px;
cursor: move;
}
} // li div.more
} // ul.list li
}
ul.theme-assets {
margin-left: 40px;
li.hidden strong a { font-style: italic; color: #8B8D9A; font-weight: normal; }
}
#contents-list li {
background: none;
li {
em {
background-position: left -31px;
cursor: move;
}
strong {
display: block;
height: 31px;
margin-left: 18px;
background: transparent image-url("locomotive/list/item-right.png") no-repeat right 0;
}
}
}
// #contents-list li {
// background: none;
//
// li {
// em {
// background-position: left -31px;
// cursor: move;
// }
//
// strong {
// display: block;
// height: 31px;
//
// margin-left: 18px;
//
// background: transparent image-url("locomotive/list/item-right.png") no-repeat right 0;
// }
// }
// }
#pages-list {
margin: 0px 0 20px 0;

11
app/assets/stylesheets/locomotive/editable_elements.scss
View File

@ -4,19 +4,12 @@
@import "compass/css3/box-shadow";
@import "buttons";
@import "helpers";
@import "box";
#editable-elements {
.nav {
display: block;
width: 918px;
height: 31px;
border: 1px solid #ccced7;
border-bottom: 0px;
@include border-top-radius(8px);
@include background-image(linear-gradient(#ebedf4, #d7dbe7));
@include box-header;
a {
float: left;

1
app/assets/stylesheets/locomotive/formtastic_changes.scss
View File

@ -169,7 +169,6 @@ form.formtastic {
background: #ebedf4;
> li.input {
margin: 0;
padding: 10px 20px 16px 20px;

2
app/assets/stylesheets/locomotive/layout.scss
View File

@ -140,7 +140,7 @@ body {
#local-actions-bar {
position: absolute;
top: 18px;
top: 16px;
right: 15px;
a {

5
app/views/locomotive/snippets/_snippet.html.haml
View File

@ -1,8 +1,7 @@
%li
%em
%strong= link_to snippet.name, edit_admin_snippet_path(snippet)
%strong= link_to snippet.name, edit_snippet_path(snippet)
.more
%span!= t('.updated_at')
= l snippet.updated_at, :format => :short
= link_to image_tag('admin/list/icons/trash.png'), admin_snippet_path(snippet), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete
= link_to 'x', snippet_path(snippet), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete

3
app/views/locomotive/theme_assets/_asset.html.haml
View File

@ -1,7 +1,6 @@
- edit = local_assigns.key?(:edit) ? edit : true
%li{ :class => (asset.new_record? ? 'new-asset' : 'asset') }
%em
%strong= link_to asset.local_path(!edit), edit ? edit_theme_asset_path(asset) : asset.source.url, :'data-local-path' => asset.local_path
.more
%span.size= number_to_human_size(asset.size)
@ -10,4 +9,4 @@
%span.date= l asset.updated_at, :format => :short
- if edit && can?(:destroy, asset)
= link_to image_tag('admin/list/icons/trash.png'), theme_asset_path(asset), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete
= link_to 'x', theme_asset_path(asset), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete

66
app/views/locomotive/theme_assets/index.html.haml
View File

@ -10,43 +10,45 @@
%p!= t('.help')
- if can?(:manage, Locomotive::Snippet)
%h3!= t('.snippets')
- if @snippets.empty?
%p.no-items!= t('locomotive.snippets.index.no_items', :url => new_snippet_url)
- else
%ul.list.theme-assets
= render @snippets
%br
.box
%h3!= t('.snippets')
.inner
- if @snippets.empty?
%p.no-items!= t('locomotive.snippets.index.no_items', :url => new_snippet_url)
- else
%ul.snippets
= render @snippets
- if can?(:manage, Locomotive::ThemeAsset)
%h3!= t('.css_and_js')
- if @js_and_css_assets.empty?
%p.no-items!= t('.no_items', :url => new_theme_asset_url)
- else
%ul.list.theme-assets
= render :partial => 'asset', :collection => @js_and_css_assets
.box
%h3!= t('.css_and_js')
.inner
- if @js_and_css_assets.empty?
%p.no-items!= t('.no_items', :url => new_theme_asset_url)
- else
%ul.js-css
= render :partial => 'asset', :collection => @js_and_css_assets
%br
%h3!= t('.images')
- if @assets[:images].nil?
%p.no-items!= t('.no_items', :url => new_theme_asset_url)
- else
%ul.list.theme-assets
= render :partial => 'asset', :collection => @assets[:images]
.box
%h3!= t('.images')
.inner
- if @assets[:images].nil?
%p.no-items!= t('.no_items', :url => new_theme_asset_url)
- else
%ul.images
= render :partial => 'asset', :collection => @assets[:images]
- if can?(:manage, Locomotive::ThemeAsset)
- if @assets[:fonts]
%br
%h3!= t('.fonts')
%ul.list.theme-assets
= render :partial => 'asset', :collection => @assets[:fonts]
.box
%h3!= t('.fonts')
.inner
%ul.fonts
= render :partial => 'asset', :collection => @assets[:fonts]
- if @assets[:medias]
%br
%h3!= t('.medias')
%ul.list.theme-assets
= render :partial => 'asset', :collection => @assets[:medias]
.box
%h3!= t('.medias')
.inner
%ul.media
= render :partial => 'asset', :collection => @assets[:medias]

2
config/locales/admin_ui.en.yml
View File

@ -29,7 +29,7 @@ en:
site: Site
theme_assets: Theme files
footer:
who_is_behind: "Service developed by %{development} and designed by <a href=\"http://www.sachagreif.com\">Sacha Greif</a>"
who_is_behind: "Product developed by %{development} and designed by <a href=\"http://www.sachagreif.com\">Sacha Greif</a>"
form_actions:
back: Back without saving
create: Create

2
config/locales/admin_ui.fr.yml
View File

@ -38,7 +38,7 @@ fr:
site: Site
theme_assets: Fichiers Thème
footer:
who_is_behind: "Service développé par %{development} et désigné par <a href=\"http://www.sachagreif.com\">Sacha Greif</a>"
who_is_behind: "Produit développé par %{development} et désigné par <a href=\"http://www.sachagreif.com\">Sacha Greif</a>"
form_actions:
back: Retour sans sauvegarder
create: Créer

5
doc/TODO
View File

@ -25,6 +25,11 @@ x edit my site
x create a new site
x create a new account
- theme assets
- polish the page
- upload many files at once
- delete in ajax
- site picker
- import/export
- content types
- install a site by default at the first installation (without asking)