mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-64376 recentlyaccessedcourses: make cards fixed width

Browse Source
This commit is contained in:
Ryan Wyllie 2018-12-12 10:06:58 +08:00 committed by Ryan Wyllie
parent 6d9727628a
commit 8c890dd57d
4 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
theme/boost/scss/moodle/blocks.scss
View File

@ -129,23 +129,31 @@ $card-gutter : $card-deck-margin * 2;
background-size: cover;
}
.dashboard-card-deck .dashboard-card {
margin-bottom: $card-gutter;
flex-basis: auto;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
.dashboard-card-img {
height: 7rem;
background-position: center;
background-size: cover;
.dashboard-card-deck {
.dashboard-card {
margin-bottom: $card-gutter;
flex-basis: auto;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
.dashboard-card-img {
height: 7rem;
background-position: center;
background-size: cover;
}
.dashboard-card-footer {
padding: 0.8rem;
}
}
.dashboard-card-footer {
padding: 0.8rem;
&.fixed-width-cards {
.dashboard-card {
width: 300px;
}
}
}
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 576px) {
.dashboard-card {
width: calc(50% - #{$card-gutter});
@ -169,7 +177,7 @@ $card-gutter : $card-deck-margin * 2;
}
#region-main.has-blocks {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 1200px) {
.dashboard-card {
width: calc(33.33% - #{$card-gutter});
@ -184,7 +192,7 @@ $card-gutter : $card-deck-margin * 2;
}
body.drawer-open-left {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 768px) {
.dashboard-card {
width: calc(100% - #{$card-gutter});
@ -209,7 +217,7 @@ body.drawer-open-left {
}
body.drawer-open-left #region-main.has-blocks {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 1200px) {
.dashboard-card {
width: calc(100% - #{$card-gutter});
@ -230,7 +238,7 @@ body.drawer-open-left #region-main.has-blocks {
@media (min-width: 1200px) {
#block-region-side-pre {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
margin-left: 0;
margin-right: 0;
.dashboard-card {
@ -297,4 +305,4 @@ body.drawer-open-left #region-main.has-blocks {
.icon {
margin-right: 2px;
}
}
}

33
theme/boost/style/moodle.css
View File

@ -11277,63 +11277,66 @@ div.editor_atto_toolbar button .icon {
.dashboard-card-deck .dashboard-card .dashboard-card-footer {
padding: 0.8rem; }
.dashboard-card-deck.fixed-width-cards .dashboard-card {
width: 300px; }
@media (min-width: 576px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(50% - 0.5rem); } }
@media (min-width: 840px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.33% - 0.5rem); } }
@media (min-width: 1100px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(25% - 0.5rem); } }
@media (min-width: 1360px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(20% - 0.5rem); } }
@media (min-width: 1200px) {
#region-main.has-blocks .dashboard-card-deck .dashboard-card {
#region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.33% - 0.5rem); } }
@media (min-width: 1470px) {
#region-main.has-blocks .dashboard-card-deck .dashboard-card {
#region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(25% - 0.5rem); } }
@media (min-width: 768px) {
body.drawer-open-left .dashboard-card-deck .dashboard-card {
body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(100% - 0.5rem); } }
@media (min-width: 861px) {
body.drawer-open-left .dashboard-card-deck .dashboard-card {
body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(50% - 0.5rem); } }
@media (min-width: 1122px) {
body.drawer-open-left .dashboard-card-deck .dashboard-card {
body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.33% - 0.5rem); } }
@media (min-width: 1381px) {
body.drawer-open-left .dashboard-card-deck .dashboard-card {
body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(25% - 0.5rem); } }
@media (min-width: 1200px) {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(100% - 0.5rem); } }
@media (min-width: 1236px) {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(50% - 0.5rem); } }
@media (min-width: 1497px) {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.33% - 0.5rem); } }
@media (min-width: 1200px) {
#block-region-side-pre .dashboard-card-deck {
#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) {
margin-left: 0;
margin-right: 0; }
#block-region-side-pre .dashboard-card-deck .dashboard-card {
#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(100% - 0.5rem) !important; } }
.block_recentlyaccesseditems img.icon {

45
theme/bootstrapbase/less/moodle/blocks.less
View File

@ -364,33 +364,42 @@
width: ~"calc(100% - 0.5rem)";
flex-basis: auto;
}
@media (min-width: 647px) {
.dashboard-card {
display: flex;
flex-direction: column;
width: ~"calc(50% - 0.5rem)";
&.fixed-width-cards {
.dashboard-card {
width: 300px;
}
}
@media (min-width: 888px) {
.dashboard-card {
width: ~"calc(33.333% - 0.5rem)";
&:not(.fixed-width-cards) {
@media (min-width: 647px) {
.dashboard-card {
display: flex;
flex-direction: column;
width: ~"calc(50% - 0.5rem)";
}
}
}
@media (min-width: 1147px) {
.dashboard-card {
width: ~"calc(25% - 0.5rem)";
@media (min-width: 888px) {
.dashboard-card {
width: ~"calc(33.333% - 0.5rem)";
}
}
}
@media (min-width: 1407px) {
.dashboard-card {
width: ~"calc(20% - 0.5rem)";
@media (min-width: 1147px) {
.dashboard-card {
width: ~"calc(25% - 0.5rem)";
}
}
@media (min-width: 1407px) {
.dashboard-card {
width: ~"calc(20% - 0.5rem)";
}
}
}
}
body.used-region-side-pre.empty-region-side-post,
body.used-region-side-post.empty-region-side-pre {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 768px) {
.dashboard-card {
width: ~"calc(100% - 0.5rem)";
@ -414,7 +423,7 @@ body.used-region-side-post.empty-region-side-pre {
}
}
body.used-region-side-pre.used-region-side-post {
.dashboard-card-deck {
.dashboard-card-deck:not(.fixed-width-cards) {
@media (min-width: 768px) {
.dashboard-card {
width: ~"calc(100% - 0.5rem)";

33
theme/bootstrapbase/style/moodle.css
View File

@ -16448,64 +16448,67 @@ body {
width: calc(100% - 0.5rem);
flex-basis: auto;
}
.dashboard-card-deck.fixed-width-cards .dashboard-card {
width: 300px;
}
@media (min-width: 647px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
display: flex;
flex-direction: column;
width: calc(50% - 0.5rem);
}
}
@media (min-width: 888px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.333% - 0.5rem);
}
}
@media (min-width: 1147px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(25% - 0.5rem);
}
}
@media (min-width: 1407px) {
.dashboard-card-deck .dashboard-card {
.dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(20% - 0.5rem);
}
}
@media (min-width: 768px) {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(100% - 0.5rem);
}
}
@media (min-width: 815px) {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(50% - 0.5rem);
}
}
@media (min-width: 1163px) {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.333% - 0.5rem);
}
}
@media (min-width: 1514px) {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(25% - 0.5rem);
}
}
@media (min-width: 768px) {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(100% - 0.5rem);
}
}
@media (min-width: 1144px) {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(50% - 0.5rem);
}
}
@media (min-width: 1680px) {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
width: calc(33.333% - 0.5rem);
}
}