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

Add calendar front-end

Browse source
This commit is contained in:
aignatov-bio 2020-02-19 15:57:06 +01:00
parent f11b051715
commit 01868fff23
11 changed files with 165 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -67,7 +67,7 @@ gem 'down', '~> 5.0'
gem 'faker' # Generate fake data
gem 'fastimage' # Light gem to get image resolution
gem 'httparty', '~> 0.13.1'
gem 'i18n-js', '~> 3.0' # Localization in javascript files
gem 'i18n-js', '~> 3.6' # Localization in javascript files
gem 'jbuilder' # JSON structures via a Builder-style DSL
gem 'logging', '~> 2.0.0'
gem 'nested_form_fields'

4
Gemfile.lock
View file

@ -281,7 +281,7 @@ GEM
multi_xml (>= 0.5.2)
i18n (1.6.0)
concurrent-ruby (~> 1.0)
i18n-js (3.3.0)
i18n-js (3.6.0)
i18n (>= 0.6.6)
image_processing (1.9.3)
mini_magick (>= 4.9.5, < 5)
@ -631,7 +631,7 @@ DEPENDENCIES
figaro
hammerjs-rails
httparty (~> 0.13.1)
i18n-js (~> 3.0)
i18n-js (~> 3.6)
image_processing (~> 1.2)
jbuilder
jquery-rails

1
app/assets/javascripts/application.js.erb
View file

@ -31,6 +31,7 @@
//= require bootstrap-select
//= require_directory ./repository_columns/columns_initializers
//= require datatables
//= require clndr/clndr.min
//= require ajax-bootstrap-select.min
//= require underscore
//= require i18n.js

56
app/assets/javascripts/dashboard/calendar.js Normal file
View file

@ -0,0 +1,56 @@
/* global I18n */
var DasboardCalendarWidget = (function() {
function calendarTemplate() {
return `<script id="calendar-template" type="text/template">
<div class="controls">
<div class="clndr-previous-button">
<div class="btn btn-light icon-btn"><i class="fas fa-angle-double-left"></i></div>
</div>
<div class="clndr-title"><%= month %> <%= year %></div>
<div class="clndr-next-button">
<div class="btn btn-light icon-btn"><i class="fas fa-angle-double-right"></i></div>
</div>
</div>
<div class="days-container">
<% _.each(daysOfTheWeek, function(day) { %>
<div class="day-header"><%= day %></div>
<% }); %>
<% _.each(days, function(day) { %>
<div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div>
<% }); %>
</div>
</script>`;
}
function initCalendar() {
var dayOfWeek = [
I18n.t('dashboard.calendar.dow.su'),
I18n.t('dashboard.calendar.dow.mo'),
I18n.t('dashboard.calendar.dow.tu'),
I18n.t('dashboard.calendar.dow.we'),
I18n.t('dashboard.calendar.dow.th'),
I18n.t('dashboard.calendar.dow.fr'),
I18n.t('dashboard.calendar.dow.sa')
];
$('.dashboard-calendar').clndr({
template: $(calendarTemplate()).html(),
adjacentDaysChangeMonth: true,
daysOfTheWeek: dayOfWeek,
forceSixRows: true
});
}
return {
init: () => {
if ($('.current-tasks-widget').length) {
initCalendar();
}
}
};
}());
$(document).on('turbolinks:load', function() {
DasboardCalendarWidget.init();
});

72
app/assets/stylesheets/dashboard/calendar.scss
View file

@ -1,6 +1,78 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
.dashboard-container .calendar-widget {
grid-column: 10 / span 3;
grid-row: 1 / span 6;
.dashboard-calendar {
height: 100%;
width: 100%;
}
.clndr {
display: flex;
flex-direction: column;
height: 100%;
.controls {
border-bottom: $border-default;
display: flex;
flex-basis: 42px;
padding: 3px;
.clndr-title {
@include font-h3;
align-items: center;
display: flex;
flex-grow: 1;
justify-content: center;
}
}
.days-container {
align-items: center;
display: grid;
flex-grow: 1;
grid-column-gap: 6px;
grid-row-gap: 6px;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(7, 1fr);
justify-items: center;
padding: 6px;
.day-header {
@include font-button;
color: $color-silver-chalice;
font-weight: bold;
}
.day {
@include font-button;
align-items: center;
display: flex;
height: 32px;
justify-content: center;
user-select: none;
width: 32px;
&.adjacent-month {
color: $color-alto;
}
&.today {
border: $border-primary;
border-radius: 50%;
}
}
}
}
}
@media (max-width: 1250px) {
.dashboard-container .calendar-widget {
grid-column: 9 / span 4;
}
}
@media (max-width: 1000px) {

6
app/assets/stylesheets/dashboard/current_tasks.scss
View file

@ -57,6 +57,12 @@
}
}
@media (max-width: 1250px) {
.dashboard-container .current-tasks-widget {
grid-column: 1 / span 8;
}
}
@media (max-width: 1000px) {
.dashboard-container .current-tasks-widget {
grid-column: 1 / span 12;

1
app/assets/stylesheets/shared_styles/constants/borders.scss
View file

@ -8,6 +8,7 @@ $border-default: 1px solid $color-alto;
$border-secondary: 1px solid $color-silver-chalice;
$border-tertiary: 1px solid $color-concrete;
$border-primary: 1px solid $brand-primary;
$border-focus: 1px solid $brand-focus;
$border-danger: 1px solid $brand-danger;
$border-transparent: 1px solid transparent;

3
app/views/dashboards/_calendar.html.erb
View file

@ -1,2 +1,3 @@
<div class="calendar-widget basic-widget">
</div>
<div class="dashboard-calendar"></div>
</div>

9
config/locales/dashboard/en.yml
View file

@ -17,3 +17,12 @@ en:
experiment: "Experiment"
select_experiment: "Select Experiment"
apply: "Apply"
calendar:
dow:
su: 'Su'
mo: 'Mo'
tu: 'Tu'
we: 'We'
th: 'Th'
fr: 'Fr'
sa: 'Sa'

1
package.json
View file

@ -57,6 +57,7 @@
"babel-loader": "^8.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap-sass": "^3.3.7",
"clndr": "^1.5.1",
"coffee-loader": "^0.8.0",
"coffeescript": "^1.12.6",
"compression-webpack-plugin": "^1.1.11",

15
yarn.lock
View file

@ -2162,6 +2162,14 @@ cliui@^5.0.0:
strip-ansi "^5.2.0"
wrap-ansi "^5.1.0"
clndr@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/clndr/-/clndr-1.5.1.tgz#713ecaa8a72dcf2fcf17c3c8e05f65dae673b91f"
integrity sha512-sPHvln2fCRiVmctixOW7K4mnNx1sVuogJDvtw/9rpYX9h2QZ4o38/v18KjpvDVUiD/+BWIeNgCWw9qYYq1RhOg==
dependencies:
jquery ">=1.9"
moment ">=2.8.3"
clone-deep@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
@ -5255,6 +5263,11 @@ jest-docblock@^21.0.0:
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
integrity sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==
jquery@>=1.9:
version "3.4.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
js-base64@^2.1.8, js-base64@^2.1.9:
version "2.5.1"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
@ -6064,7 +6077,7 @@ moment-timezone@^0.5.21:
dependencies:
moment ">= 2.9.0"
"moment@>= 2.9.0", moment@^2.22.2:
"moment@>= 2.9.0", moment@>=2.8.3, moment@^2.22.2:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==