Browse Source

styles: add mobile support

master
Peter Cai 3 years ago
parent
commit
171bba517d
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
  1. 3
      src/web/styles/buttons.scss
  2. 12
      src/web/styles/dialog.scss
  3. 23
      src/web/styles/home.scss
  4. 1
      src/web/styles/vars.scss
  5. 5
      webpack.config.web.js

3
src/web/styles/buttons.scss

@ -5,6 +5,9 @@
padding: 10px 24px;
margin-left: $button-margin-left;
margin-right: $button-margin-right;
// Needed because on mobile buttons can get vertical
margin-top: $button-margin-vertical;
margin-bottom: $button-margin-vertical;
text-align: center;
text-decoration: none;
display: inline-block;

12
src/web/styles/dialog.scss

@ -12,6 +12,7 @@
border-radius: $dialog-radius;
box-shadow: $shadow-large;
padding: $dialog-inset;
box-sizing: border-box;
p {
display: inline-block;
@ -51,4 +52,15 @@
.ReactModal__Content_My {
transform: translateY(-#{$dialog-height});
}
}
/*
* When the screen cannot accomodate the full dialog (e.g. mobile)
*/
@media screen and ( max-width: $dialog-width ) {
.ReactModal__Content_My {
width: 100vw;
left: 0;
top: $dialog-margin / 2;
}
}

23
src/web/styles/home.scss

@ -15,6 +15,7 @@
box-shadow: $shadow-medium;
border-radius: $content-radius;
padding: $content-inset;
box-sizing: border-box;
.switch-wrapper, .switch-wrapper > div {
width: 100%;
@ -31,7 +32,10 @@
}
.content-buttons {
margin-top: $content-inset;
// Cancel the vertical margin of the first and last button row
// (but not all the other rows, when they are arranged in multiple rows)
margin-top: $content-inset - $button-margin-vertical;
margin-bottom: -$button-margin-vertical;
text-align: right;
}
@ -44,4 +48,21 @@
padding-top: calc((100vh - #{$content-height}) / 2);
padding-bottom: calc((100vh - #{$content-height}) / 2);
}
}
/*
* when screen is smaller than the normal content area, e,g, mobile
*/
@media screen and ( max-width: $content-width ) {
.content {
width: 100vw;
max-width: 100%;
}
@media screen and ( max-height: $content-height + $content-padding ) {
.content-wrapper {
padding-top: $content-padding / 2;
padding-bottom: $content-padding / 2;
}
}
}

1
src/web/styles/vars.scss

@ -12,6 +12,7 @@ $editable-radius: 2px;
$button-radius: 3px;
$button-margin-right: 0px;
$button-margin-left: 5px;
$button-margin-vertical: 5px;
// Dialogs
$dialog-width: 500px;
$dialog-height: 200px;

5
webpack.config.web.js

@ -21,7 +21,10 @@ module.exports = {
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$', // embed all javascript and css inline
title: 'Angry.Im Pastebin'
title: 'Angry.Im Pastebin',
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
}
}),
new HtmlWebpackInlineSourcePlugin()
],

Loading…
Cancel
Save