scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-11 08:51:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update attachemnts css (#1700)

Browse source
This commit is contained in:
aignatov-bio 2019-04-26 15:20:39 +02:00 • committed by GitHub
parent 6bb19ed0be
commit 57b80280dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/stylesheets/constants.scss
View file

@ -494,3 +494,16 @@ $state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
// $dl-horizontal-offset: $component-offset-horizontal; // $dl-horizontal-offset: $component-offset-horizontal;
// $dl-horizontal-breakpoint: $grid-float-breakpoint; // $dl-horizontal-breakpoint: $grid-float-breakpoint;
// $hr-border: $gray-lighter; // $hr-border: $gray-lighter;
//
//
//
// // Material design - https://material.io/design/
//
// Card style
$md-color-shadow-light: rgba(0, 0, 0, .12);
$md-color-shadow-dark: rgba(0, 0, 0, .24);
$md-shadow: 0 1px 3px $md-color-shadow-light, 0 1px 2px $md-color-shadow-dark;
$md-shadow-hover: 0 14px 28px $md-color-shadow-dark, 0 10px 10px $md-color-shadow-dark;
$md-transaction: all .4s cubic-bezier(.25, .8, .25, 1);

11
app/assets/stylesheets/mixins.scss
View file

@ -62,3 +62,14 @@
transition-property: transform; transition-property: transform;
@include rotate($degrees); @include rotate($degrees);
} }
// Material design mixins
@mixin md-card-style {
background-color: $color-white;
border: 1px solid $color-concrete;
border-radius: 5px;
box-shadow: $md-shadow;
transition: $md-transaction;
}

32
app/assets/stylesheets/steps.scss
View file

@ -7,6 +7,7 @@
// scss-lint:disable ImportantRule // scss-lint:disable ImportantRule
@import "constants"; @import "constants";
@import "mixins";
#new_step, #new_step,
.panel-step-attachment { .panel-step-attachment {
@ -89,18 +90,22 @@
} }
.attacments { .attacments {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
justify-content: space-evenly;
.pseudo-attachment-container {
display: flex;
justify-content: center;
}
} }
.attachment-placeholder { .attachment-placeholder {
background-color: $color-white; @include md-card-style;
border-radius: 5px;
color: $color-silver-chalice; color: $color-silver-chalice;
height: 277px; height: 280px;
margin: 3px; margin: 8px;
width: 216px; text-align: center;
width: 220px;
a { a {
color: inherit; color: inherit;
@ -111,19 +116,20 @@
} }
&:hover { &:hover {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .18); box-shadow: $md-shadow-hover;
} }
.attachment-thumbnail { .attachment-thumbnail {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15); display: inline-block;
height: 160px; height: 160px;
margin: 16px auto 5px; margin: 16px 10px 5px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
width: 113px;
img { img {
border-radius: 5px;
max-height: 100%; max-height: 100%;
max-width: 100%;
} }
i.fas { i.fas {
@ -160,7 +166,7 @@
} }
.remove-icon { .remove-icon {
bottom: 10px; bottom: 15px;
position: relative; position: relative;
right: 10px; right: 10px;
} }

8
app/views/steps/attachments/_item.html.erb
View file

@ -1,4 +1,5 @@
<%= link_to download_asset_path(asset), <div class="pseudo-attachment-container">
<%= link_to download_asset_path(asset),
class: 'file-preview-link', class: 'file-preview-link',
id: "modal_link#{asset.id}", id: "modal_link#{asset.id}",
style: "order: #{ assets_count - i }", style: "order: #{ assets_count - i }",
@ -10,6 +11,7 @@
'order-new': assets_count - i, 'order-new': assets_count - i,
} do %> } do %>
<%= render partial: 'steps/attachments/placeholder.html.erb', <%= render partial: 'steps/attachments/placeholder.html.erb',
locals: { edit_page: false, asset: asset } %> locals: { edit_page: false, asset: asset } %>
<% end %> <% end %>
</div>