moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-07 18:06:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-68209 core_course: improve activity chooser styling

Browse source
This commit is contained in:
Bas Brands 2020-05-21 10:58:24 +02:00
parent 68fd8d8bdf
commit 5fe7bcdb30
10 changed files with 200 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

60
theme/boost/scss/moodle/core.scss
View file

@ -1545,8 +1545,23 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
*/
.modchooser .modal-body {
padding: 0;
min-height: 640px;
overflow-y: auto;
min-height: 640px;
display: flex;
flex-direction: column;
.searchresultitemscontainer-wrapper {
min-height: 495px;
}
.carousel-item.active {
display: flex;
}
.chooser-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.loading-icon {
opacity: 1;
@ -1558,7 +1573,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
}
}
.carousel-item .loading-icon .icon {
margin: 5em auto;
margin: 1em auto;
}
}
@ -1583,8 +1598,8 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
.modchoosercontainer .searchresultitemscontainer {
overflow-x: hidden;
.option {
// Six items per line.
flex-basis: 16.66%;
// 2 items per line.
flex-basis: calc(50% - 0.5rem);
.optionactions {
.optionaction {
cursor: pointer;
@ -1600,15 +1615,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
&:hover {
text-decoration: none;
}
.optionicon {
.icon {
margin: 0;
padding: 0;
width: 32px;
height: 32px;
font-size: 32px;
}
}
}
}
}
@ -1638,14 +1644,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
}
}
@include media-breakpoint-down(lg) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
// Five items per line.
flex-basis: 20%;
}
}
@include media-breakpoint-down(xs) {
.path-course-view .modal-dialog.modal-lg,
.path-course-view .modal-content,
@ -1657,15 +1655,31 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
.modchoosercontainer,
.optionscontainer,
.searchresultitemscontainer {
min-height: auto;
height: 100%;
overflow-y: auto;
}
.path-course-view .modal-dialog.modal-lg {
margin: 0;
}
.modchooser .modal-body .searchresultitemscontainer-wrapper {
min-height: auto;
}
}
@include media-breakpoint-up(sm) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
// Four items per line.
flex-basis: 25%;
// Three items per line.
flex-basis: calc(33.33% - 0.5rem);
}
}
@include media-breakpoint-up(lg) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
// Six items per line.
flex-basis: calc(16.66% - 0.5rem);
}
}

4
theme/boost/scss/moodle/icons.scss
View file

@ -16,7 +16,9 @@ $iconsizes: map-merge((
2: ($icon-width * .5),
3: $icon-width,
4: ($icon-width * 1.5),
5: ($icon-width * 3)
5: ($icon-width * 2),
6: ($icon-width * 2.5),
7: ($icon-width * 3)
), $iconsizes);
// stylelint-enable

87
theme/boost/style/moodle.css
View file

@ -10894,8 +10894,18 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
*/
.modchooser .modal-body {
padding: 0;
overflow-y: auto;
min-height: 640px;
overflow-y: auto; }
display: flex;
flex-direction: column; }
.modchooser .modal-body .searchresultitemscontainer-wrapper {
min-height: 495px; }
.modchooser .modal-body .carousel-item.active {
display: flex; }
.modchooser .modal-body .chooser-container {
display: flex;
flex-direction: column;
flex: 1 1 auto; }
.modchooser .modal-body .loading-icon {
opacity: 1; }
.modchooser .modal-body .loading-icon .icon {
@ -10904,7 +10914,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
height: 1em;
width: 1em; }
.modchooser .modal-body .carousel-item .loading-icon .icon {
margin: 5em auto; }
margin: 1em auto; }
.modchoosercontainer.noscroll {
overflow-y: hidden; }
@ -10924,7 +10934,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
overflow-x: hidden; }
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
flex-basis: 16.66%; }
flex-basis: calc(50% - 0.5rem); }
.modchoosercontainer .optionscontainer .option .optionactions .optionaction,
.modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
cursor: pointer;
@ -10938,13 +10948,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
.modchoosercontainer .optionscontainer .option .optioninfo a:hover,
.modchoosercontainer .searchresultitemscontainer .option .optioninfo a:hover {
text-decoration: none; }
.modchoosercontainer .optionscontainer .option .optioninfo a .optionicon .icon,
.modchoosercontainer .searchresultitemscontainer .option .optioninfo a .optionicon .icon {
margin: 0;
padding: 0;
width: 32px;
height: 32px;
font-size: 32px; }
.modchooser .modal-body .optionsummary {
background-color: #fff;
@ -10962,11 +10965,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
border-top: 1px solid #dee2e6;
background: #fff; }
@media (max-width: 1199.98px) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
flex-basis: 20%; } }
@media (max-width: 575.98px) {
.path-course-view .modal-dialog.modal-lg,
.path-course-view .modal-content,
@ -10978,12 +10976,23 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
.modchoosercontainer,
.optionscontainer,
.searchresultitemscontainer {
height: 100%; }
min-height: auto;
height: 100%;
overflow-y: auto; }
.path-course-view .modal-dialog.modal-lg {
margin: 0; }
.modchooser .modal-body .searchresultitemscontainer-wrapper {
min-height: auto; } }
@media (min-width: 576px) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
flex-basis: 25%; } }
flex-basis: calc(33.33% - 0.5rem); } }
@media (min-width: 992px) {
.modchoosercontainer .optionscontainer .option,
.modchoosercontainer .searchresultitemscontainer .option {
flex-basis: calc(16.66% - 0.5rem); } }
/* Form element: listing */
.formlistingradio {
@ -11815,6 +11824,22 @@ body.h5p-embed .h5pmessages {
/* stylelint-disable-line declaration-no-important */ }
.icon-size-5 .icon {
height: 32px !important;
/* stylelint-disable-line declaration-no-important */
width: 32px !important;
/* stylelint-disable-line declaration-no-important */
font-size: 32px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-6 .icon {
height: 40px !important;
/* stylelint-disable-line declaration-no-important */
width: 40px !important;
/* stylelint-disable-line declaration-no-important */
font-size: 40px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-7 .icon {
height: 48px !important;
/* stylelint-disable-line declaration-no-important */
width: 48px !important;
@ -15112,6 +15137,16 @@ a.ygtvspacer:hover {
width: 44px !important;
/* stylelint-disable-line declaration-no-important */ }
.message-app .btn.btn-link.btn-icon.icon-size-5 {
height: 52px !important;
/* stylelint-disable-line declaration-no-important */
width: 52px !important;
/* stylelint-disable-line declaration-no-important */ }
.message-app .btn.btn-link.btn-icon.icon-size-6 {
height: 60px !important;
/* stylelint-disable-line declaration-no-important */
width: 60px !important;
/* stylelint-disable-line declaration-no-important */ }
.message-app .btn.btn-link.btn-icon.icon-size-7 {
height: 68px !important;
/* stylelint-disable-line declaration-no-important */
width: 68px !important;
@ -17771,6 +17806,24 @@ p.arrow_button {
line-height: 24px !important;
/* stylelint-disable-line declaration-no-important */ }
.btn.btn-icon.icon-size-5 {
height: 52px !important;
/* stylelint-disable-line declaration-no-important */
width: 52px !important;
/* stylelint-disable-line declaration-no-important */
font-size: 32px !important;
/* stylelint-disable-line declaration-no-important */
line-height: 32px !important;
/* stylelint-disable-line declaration-no-important */ }
.btn.btn-icon.icon-size-6 {
height: 60px !important;
/* stylelint-disable-line declaration-no-important */
width: 60px !important;
/* stylelint-disable-line declaration-no-important */
font-size: 40px !important;
/* stylelint-disable-line declaration-no-important */
line-height: 40px !important;
/* stylelint-disable-line declaration-no-important */ }
.btn.btn-icon.icon-size-7 {
height: 68px !important;
/* stylelint-disable-line declaration-no-important */
width: 68px !important;