scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-29 03:35:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix due date alignment and chage header structure from bootstrap to flexbox

Browse source
This commit is contained in:
Anton Ignatov 2019-05-06 16:20:00 +02:00
parent 3f0401bf9a
commit 2a294c408f
2 changed files with 58 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -15,26 +15,28 @@
}
.module-header {
padding-top: 15px !important;
display: inline-block;
position: relative;
width: 100%;
.first-row {
max-height: 40px;
.header-container {
display: flex;
flex-wrap: wrap;
float: left;
width: calc(100% - 180px);
.date-block {
max-width: 250px;
.flex-block {
display: flex;
flex-grow: 1;
}
}
div {
height: 45px;
}
.complete-button-container {
float: right;
width: 165px;
.complete-button-container {
float: right;
max-width: 165px;
.my_module-state-buttons {
padding-top: 0;
}
.my_module-state-buttons {
padding-top: 0;
}
}
@ -51,25 +53,42 @@
padding-right: 5px;
+ .well-sm {
margin-left: 32px;
margin-bottom: 10px;
margin-left: 0;
}
}
.module-description {
float: left;
padding-left: 10px;
width: 100%;
}
.module-tags {
float: left;
width: 100%;
#module-tags {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.badge-icon {
line-height: 32px;
padding: 0 5px 0 10px;
}
.tags-title {
line-height: 32px;
}
.badge-icon {
line-height: 32px;
padding: 9px 5px 9px 10px;
}
.select-container {
float: right;
display: flex;
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 1;
position: relative;
width: calc(100% - 35px);
select {
display: none;

32
app/views/my_modules/_module_header.html.erb
View file

@ -1,5 +1,5 @@
<div class="row first-row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 date-block">
<div class="header-container">
<div class="flex-block date-block">
<div class="badge-icon">
<span class="fas fa-calendar-alt"></span>
</div>
@ -9,7 +9,7 @@
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 help_tooltips date-block"
<div class="flex-block help_tooltips date-block"
data-tooltiplink="<%= I18n.t('tooltips.link.task.due_date_specific') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.task.due_date_specific') %>">
<div class="badge-icon">
@ -39,11 +39,9 @@
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 complete-button-container">
<%= render partial: "my_modules/state_buttons.html.erb" %>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<div class="flex-block">
<div class="badge-icon">
<span class="fas fa-tachometer-alt"></span>
</div>
@ -55,20 +53,23 @@
</div>
</div>
</div>
<div class="row module-tags">
<div class="col-xs-12 col-sm-12 col-md-12" id="module-tags" data-module-tags-url="<%= my_module_my_module_tags_url(@my_module, format: :json) %>">
<div class="complete-button-container">
<%= render partial: "my_modules/state_buttons.html.erb" %>
</div>
<div class="module-tags">
<div id="module-tags" data-module-tags-url="<%= my_module_my_module_tags_url(@my_module, format: :json) %>">
<div class="badge-icon">
<span class="fas fa-tags"></span>
</div>
<div class="well well-sm">
<span class="hidden-xs hidden-sm tags-title"><%=t "my_modules.module_header.tags" %></span>
<%= render partial: "my_modules/tags", locals: { my_module: @my_module, editable: can_manage_module?(@my_module) } %>
</div>
<span class="hidden-xs hidden-sm tags-title"><%=t "my_modules.module_header.tags" %></span>
<%= render partial: "my_modules/tags", locals: { my_module: @my_module, editable: can_manage_module?(@my_module) } %>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="module-description">
<h4>
<%= t('my_modules.module_header.description_label') %>
</h4>
@ -84,7 +85,6 @@
<%= t('my_modules.module_header.no_description') %>
<% end %>
</div>
</div>
</div>
<!-- Edit description modal -->