Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MUI changes #195

Merged
merged 11 commits into from
Sep 10, 2018
Merged

MUI changes #195

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7a3565b
Add responsive table styling to baseframe-mui.
vidya-ram Jul 19, 2018
9d83f08
Add mui responsive table, helper css.
vidya-ram Aug 6, 2018
9b6f2f4
CSS fixes for mui.
vidya-ram Aug 20, 2018
20bf4de
Update p margin in footer.
vidya-ram Aug 23, 2018
37bc31a
Add background to footer.
vidya-ram Aug 23, 2018
ca8e606
Change font size, color of mui form label.
vidya-ram Aug 23, 2018
6dc1851
Fix styling for search on map field. Disable mui float labels for dat…
vidya-ram Aug 31, 2018
6a8c971
Fix indentation.
vidya-ram Sep 7, 2018
013be79
Fix indentation.
vidya-ram Sep 7, 2018
c76ce6c
Fix indentation
vidya-ram Sep 7, 2018
752de7c
Merge branch 'master' into mui-responsive-table
vidya-ram Sep 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
341 changes: 248 additions & 93 deletions baseframe/static/css/mui.css
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions baseframe/static/js/baseframe-material.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ function activate_widgets() {
// Activate select2.js for non-mobile browsers
if (!Modernizr.touch) {
$('select:not(.notselect)').select2();

//Remove the scroll lock class added by mui.js on opening select menu
$('select:not(.notselect)').on("select2:select", function(e) {
vidya-ram marked this conversation as resolved.
Show resolved Hide resolved
$('body').removeClass('mui-scroll-lock');
});
}

var cm_markdown_config = { mode: 'gfm',
Expand Down Expand Up @@ -367,8 +372,8 @@ window.Baseframe.MapMarker.prototype.getDefaultLocation = function() {

window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<p class="help-error"></p>',
errorClass: 'has-error',
errorTemplate: '<p class="mui-form--error"></p>',
errorClass: 'mui-form--error',
classHandler: function(ParsleyField) {
return ParsleyField.$element.closest('.form-group');
},
Expand Down
12 changes: 1 addition & 11 deletions baseframe/static/sass/baseframe-material/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.card__title {
padding: 0 $reflex-cell-spacing;
}
}

.card__title__heading {
margin: $reflex-cell-spacing/4 auto
Expand All @@ -20,11 +20,6 @@
.card__header {
padding: $reflex-cell-spacing;
background: $mui-bg-color-light;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}

.card__header__title {
Expand All @@ -46,11 +41,6 @@
.card__body {
@extend .mui--text-body2;
padding: $reflex-cell-spacing/2 $reflex-cell-spacing;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}

.card__body__text {
Expand Down
32 changes: 25 additions & 7 deletions baseframe/static/sass/baseframe-material/_chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,36 @@
.chip {
padding: 0 5px;
padding: 0 5px 5px;
border: 0;
border-radius: $mui-border-radius-default;
background-color: #F7e2c5;
display: inline-block;
color: #906B37;
white-space: nowrap;
}

.chip--bg-primary {
background-color: $mui-bg-color-primary;
color: $mui-text-dark;
}

.chip--bg-accent {
background-color: $mui-bg-color-accent;
color: $mui-text-dark;
}

.chip--bg-light {
background-color: $mui-bg-color-light;
color: $mui-text-dark;
}

.chip--bg-dark {
background-color: $mui-bg-color-dark;
color: $mui-text-dark;
}

.chip__text {
@extend .mui--text-caption;
line-height: 1;
vertical-align: middle;
display: inline-block;
}
.chip--bg-danger {
background-color: $mui-danger-color;
color: mui-color('white');
}

.chip + .chip {
Expand Down
1 change: 0 additions & 1 deletion baseframe/static/sass/baseframe-material/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
padding-bottom: 1em;
p {
font-size: inherit;
margin: 0;
}
}
}
Expand Down
28 changes: 27 additions & 1 deletion baseframe/static/sass/baseframe-material/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
}
}

.form-message {
@extend .mui--text-title;
}

.mui-form {
.mui-form--sidetext,
.mui-form--helptext {
Expand Down Expand Up @@ -38,13 +42,32 @@
.has-error .mui-textfield.mui-textfield--float-label > label {
color: $mui-text-danger;
}

.mui-form--label {
color: $mui-label-font-color;
font-size: $mui-label-font-size;
line-height: $xFormLabelLineHeight;
}

.mui-radio,
.mui-checkbox {
margin-bottom: 20px;
}
}

.mui-form--margins {
margin-top: 1*$reflex-cell-spacing;
margin-bottom: 2*$reflex-cell-spacing;
}

.mui-select {
margin-top: $mui-form-group-margin-bottom;
> label {
top: -$mui-form-group-margin-bottom/4;
}
.select2 {
width: 100% !important;
}
}

.listwidget ul, .listwidget ol {
Expand All @@ -53,15 +76,18 @@
margin-left: 0;
margin-bottom: 0;
}

.listwidget ul li, .listwidget ol li {
position: relative;
margin-left: 1.25em;
}

.listwidget ul input, .listwidget ol input {
position: absolute;
left: -1.25em;
top: 0.45em;
top: 0.25em;
}

.listwidget ul label, .listwidget ol label {
display: inline-block;
}
90 changes: 90 additions & 0 deletions baseframe/static/sass/baseframe-material/_helper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
// ============================================================================
// LISTS
// ============================================================================

.mui-list--aligned {
padding-left: $reflex-cell-spacing;
}

// ============================================================================
// DISPLAY
// ============================================================================

.mui--d-block { display: block; }
.mui--d-inlineblock { display: inline-block; }
.mui--d-inline { display: inline; }

// ============================================================================
// BACKGROUND COLORS
// ============================================================================

.mui--bg-primary { background-color: $mui-bg-color-primary; }
.mui--bg-primary-dark { background-color: $mui-bg-color-dark; }
.mui--bg-primary-light { background-color: $mui-bg-color-light; }

.mui--bg-accent { background-color: $mui-bg-color-accent; }

// ============================================================================
// TYPOGRAPHY
// ============================================================================

.mui--text-display3 {
font-weight: 400;
font-size: 64px;
line-height: 64px;
}

.mui--text-display2 {
font-weight: 400;
font-size: 48px;
line-height: 58px;
}

.mui--text-display1, h1 {
font-weight: 400;
font-size: 32px;
line-height: 40px;
}

.mui--text-headline, h2 {
font-weight: 400;
font-size: 24px;
line-height: 32px;
}

.mui--text-title, h3 {
font-weight: 400;
font-size: 18px;
line-height: 28px;
}

.mui--text-subhead, h4 {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}

.mui--text-body2, h5 {
font-weight: 400;
font-size: 14px;
line-height: 24px;
}

.mui--text-body1 {
font-weight: 400;
font-size: 14px;
line-height: 24px;
}

.mui--text-caption, h6 {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}

.mui--text-menu,
.mui--text-button {
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
104 changes: 74 additions & 30 deletions baseframe/static/sass/baseframe-material/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
html, body {
height: 100%;
height: 100%;
}

[class*="grid__col-"] {
padding-top: 0;
padding-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}

h1, h2, h3 {
margin-top: 8px;
margin-bottom: 8px;
}

.mui-btn .material-icons,
.material-icons--small {
vertical-align: bottom;
font-size: 18px;
line-height: inherit;
margin-top: 8px;
margin-bottom: 8px;
}

.mui-divider {
width: 100%;
width: 100%;
}

.main-content {
position: relative;
margin: 0 auto;
position: relative;
margin: 0 auto;
}

@media (min-width: 1200px) {
Expand All @@ -36,26 +29,77 @@ h1, h2, h3 {
}
}

.mui-form--margins {
margin-top: 3*$reflex-cell-spacing;
margin-bottom: 2*$reflex-cell-spacing;
}

.table-wrapper {
overflow-x: auto;
overflow-x: auto;
}

.img-responsive {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: $mui-overlay-bg-color;
z-index: 2;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: $mui-overlay-bg-color;
z-index: 2;
}
vidya-ram marked this conversation as resolved.
Show resolved Hide resolved

.map {
.map__search-icon {
width: 26px;
display: inline-block;
}

.map__search-field {
width: calc(100% - 30px);
display: inline-block;
}

.map__marker {
margin-top: $mui-base-line-height / 2;
width: 100%;
height: 20em;
margin-bottom: 20px;
}
}

/* Cookies */
.cookies-required-alert,
.no-cookies .cookies-required {
display: none
}

.cookies-required,
.no-cookies .cookies-required-alert {
display: block
}

.no-cookies .cookies-required-alert {
margin-top: 1em
}

.js .jshidden,
.js .no-js-only {
display: none;
visibility: hidden;
}

.no-js .no-jshidden,
.no-js .js-only {
display: none;
visibility: hidden;
}

.userlogin .no-userlogin-only {
display: none;
visibility: hidden;
}

.no-userlogin .userlogin-only {
display: none;
visibility: hidden;
}
Loading