From 3833c12ccce59bcc49c4cfa892401973558f604d Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Mon, 2 Jan 2017 17:01:27 -0500 Subject: Refactoring/rewrite of modal boxes handling --- assets/sass/_board.sass | 5 ++--- assets/sass/_file_upload.sass | 2 +- assets/sass/_form.sass | 11 ++++++++--- assets/sass/_links.sass | 3 +++ assets/sass/_markdown_editor.sass | 10 ++++++++-- assets/sass/_modal.sass | 34 ++++++++++++++++++++++++++++++++++ assets/sass/_popover.sass | 35 ----------------------------------- assets/sass/_select_dropdown.sass | 5 +++++ assets/sass/_task_form.sass | 32 ++++++++++++++++++++++++++++++++ assets/sass/app.sass | 3 ++- 10 files changed, 95 insertions(+), 45 deletions(-) create mode 100644 assets/sass/_modal.sass delete mode 100644 assets/sass/_popover.sass create mode 100644 assets/sass/_task_form.sass (limited to 'assets/sass') diff --git a/assets/sass/_board.sass b/assets/sass/_board.sass index c94879bc..d7d10d2e 100644 --- a/assets/sass/_board.sass +++ b/assets/sass/_board.sass @@ -65,11 +65,10 @@ td.board-column-task-collapsed .board-add-icon float: left padding: 0 5px - a + i text-decoration: none color: link-color('primary') - font-size: size('xlarge') - line-height: 70% + font-size: size('large') &:focus, &:hover text-decoration: none color: red diff --git a/assets/sass/_file_upload.sass b/assets/sass/_file_upload.sass index b258620e..bdd31a62 100644 --- a/assets/sass/_file_upload.sass +++ b/assets/sass/_file_upload.sass @@ -26,6 +26,6 @@ padding-bottom: 8px border-bottom: 1px dotted #ddd width: 95% - &.file-error + .file-error font-weight: bold color: color('error') diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass index ace988f5..855f7714 100644 --- a/assets/sass/_form.sass +++ b/assets/sass/_form.sass @@ -1,13 +1,19 @@ @import variables @import mixins -form - margin-bottom: 20px +fieldset + border: 1px solid #ccc + margin-top: 20px + +legend + font-weight: 500 + font-size: size('medium') label cursor: pointer display: block margin-top: 10px + font-weight: 400 input &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field) @@ -19,7 +25,6 @@ input height: 25px padding-bottom: 0 font-family: sans-serif - margin-top: 10px +appearance @include placeholder color: color('lighter') diff --git a/assets/sass/_links.sass b/assets/sass/_links.sass index d4544391..3c34b964 100644 --- a/assets/sass/_links.sass +++ b/assets/sass/_links.sass @@ -10,3 +10,6 @@ a &:hover color: link-color('hover') text-decoration: none + .fa + text-decoration: none + color: color('primary') \ No newline at end of file diff --git a/assets/sass/_markdown_editor.sass b/assets/sass/_markdown_editor.sass index b9279be9..ac25101e 100644 --- a/assets/sass/_markdown_editor.sass +++ b/assets/sass/_markdown_editor.sass @@ -1,6 +1,7 @@ @import variables .text-editor + margin-top: 10px a font-size: size('normal') color: color('light') @@ -10,7 +11,12 @@ color: link-color('primary') .text-editor-preview-area border: 1px solid color('lighter') - width: 400px - height: 200px + width: 700px + max-width: 99% + height: 250px overflow: auto padding: 2px + textarea + width: 700px + max-width: 98% + height: 250px \ No newline at end of file diff --git a/assets/sass/_modal.sass b/assets/sass/_modal.sass new file mode 100644 index 00000000..7ade3be5 --- /dev/null +++ b/assets/sass/_modal.sass @@ -0,0 +1,34 @@ +@import variables +@import mixins + +#modal-overlay + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + background: rgba(0, 0, 0, 0.9) + overflow: auto + z-index: 100 + +#modal-box + position: fixed + max-height: calc(100% - 50px) + top: 2% + left: 50% + transform: translateX(-50%) + background: #fff + overflow: auto + border-radius: 5px + +#modal-content + padding: 0 5px 5px + +#modal-header + text-align: right + padding-right: 5px + +#modal-close-button + color: color('primary') + &:hover + color: color('error') diff --git a/assets/sass/_popover.sass b/assets/sass/_popover.sass deleted file mode 100644 index b45f8401..00000000 --- a/assets/sass/_popover.sass +++ /dev/null @@ -1,35 +0,0 @@ -@import variables -@import mixins - -#popover-container - position: fixed - top: 0 - left: 0 - width: 100% - height: 100% - background: rgba(0, 0, 0, 0.9) - overflow: auto - z-index: 100 - -#popover-content - position: fixed - width: 950px - max-width: 95% - max-height: calc(100% - 50px) - top: 5% - left: 50% - transform: translateX(-50%) - padding: 0 15px 15px - background: #fff - overflow: auto - -#popover-content-header - text-align: right - -#popover-close-button - color: color('primary') - &:hover - color: color('error') - -.popover-form - margin-bottom: 0 diff --git a/assets/sass/_select_dropdown.sass b/assets/sass/_select_dropdown.sass index 16481a2a..f0cef59c 100644 --- a/assets/sass/_select_dropdown.sass +++ b/assets/sass/_select_dropdown.sass @@ -45,3 +45,8 @@ top: 4px right: 5px cursor: pointer + .select-loading-icon + color: color('medium') + position: absolute + top: 4px + right: 5px \ No newline at end of file diff --git a/assets/sass/_task_form.sass b/assets/sass/_task_form.sass new file mode 100644 index 00000000..b7583981 --- /dev/null +++ b/assets/sass/_task_form.sass @@ -0,0 +1,32 @@ +@import variables + +.task-form-container + @include grid(100) + +.task-form-main-column + @include grid_width(60/100) + @include custom-device(1000px) + @include grid_width(1) + + input[type="text"] + width: 700px + max-width: 99% + +.task-form-secondary-column + max-width: 250px + min-width: 200px + max-height: 600px + padding-left: 10px + overflow: auto + @include grid_width(20/100) + @include custom-device(1000px) + @include grid_width(1) + max-width: 99% + max-height: none + label:first-child + margin-top: 0 + @include custom-device(1000px) + margin-top: 10px + +.task-form-bottom + @include grid_width(1) diff --git a/assets/sass/app.sass b/assets/sass/app.sass index 378b3ea3..003d940a 100644 --- a/assets/sass/app.sass +++ b/assets/sass/app.sass @@ -15,7 +15,7 @@ @import select_dropdown @import suggest_menu @import dialog_box -@import popover +@import modal @import pagination @import header @import logo @@ -41,6 +41,7 @@ @import task_board_date @import task_tags @import task_summary +@import task_form @import task_listing @import comment @import subtasks -- cgit v1.2.3