mirror of
https://github.com/OpenBankProject/API-Explorer.git
synced 2026-02-06 18:56:49 +00:00
Make GUI more user friendly at mobile devices - added screen.css
This commit is contained in:
Marko Milić
parent
e83c366762
commit
8b9c73a003
142
src/main/webapp/media/css/screen.css
Normal file
142
src/main/webapp/media/css/screen.css
Normal file
@ -0,0 +1,142 @@
|
||||
|
||||
@media only screen and (max-width: 1081px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 1000px;}
|
||||
.content-box__input-box {max-width: 1000px;}
|
||||
.content-box__right-box {max-width: 1000px;}
|
||||
.content-box__text-box {max-width: 1000px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 88%;}
|
||||
.default-input {max-width: 82%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: hidden;}
|
||||
#logo-right {visibility: visible;}
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 900px;}
|
||||
.content-box__input-box {max-width: 900px;}
|
||||
.content-box__right-box {max-width: 900px;}
|
||||
.content-box__text-box {max-width: 900px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 85%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: hidden;}
|
||||
#logo-right {visibility: visible;}
|
||||
}
|
||||
@media only screen and (max-width: 900px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 800px;}
|
||||
.content-box__input-box {max-width: 800px;}
|
||||
.content-box__right-box {max-width: 800px;}
|
||||
.content-box__text-box {max-width: 800px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 85%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 700px;}
|
||||
.content-box__input-box {max-width: 700px;}
|
||||
.content-box__right-box {max-width: 700px;}
|
||||
.content-box__text-box {max-width: 700px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 83%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 600px;}
|
||||
.content-box__input-box {max-width: 600px;}
|
||||
.content-box__right-box {max-width: 600px;}
|
||||
.content-box__text-box {max-width: 600px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 83%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 500px;}
|
||||
.content-box__input-box {max-width: 500px;}
|
||||
.content-box__right-box {max-width: 500px;}
|
||||
.content-box__text-box {max-width: 500px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 80%;}
|
||||
.default-input {max-width: 70%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 450px;}
|
||||
.content-box__input-box {max-width: 450px;}
|
||||
.content-box__right-box {max-width: 450px;}
|
||||
.content-box__text-box {max-width: 450px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 75%;}
|
||||
.default-input {max-width: 65%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
/*iPhone 6/7/8 Plus*/
|
||||
@media only screen and (max-width: 414px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 390px;}
|
||||
.content-box__input-box {max-width: 390px;}
|
||||
.content-box__right-box {max-width: 390px;}
|
||||
.content-box__text-box {max-width: 390px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 75%;}
|
||||
.default-input {max-width: 63%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
/*iPhone 6/7/8*/
|
||||
@media only screen and (max-width: 375px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 350px;}
|
||||
.content-box__input-box {max-width: 350px;}
|
||||
.content-box__right-box {max-width: 350px;}
|
||||
.content-box__text-box {max-width: 350px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 70%;}
|
||||
.default-input {max-width: 57%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@ -1177,151 +1177,4 @@ a.end-point-anchor {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.grid-header {grid-area: header}
|
||||
|
||||
/*
|
||||
* This section below must be copy pasted as a last segment to the css file defined over the props: webui_override_style_sheet
|
||||
* ========================================================================== START
|
||||
*/
|
||||
@media only screen and (max-width: 1081px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 1000px;}
|
||||
.content-box__input-box {max-width: 1000px;}
|
||||
.content-box__right-box {max-width: 1000px;}
|
||||
.content-box__text-box {max-width: 1000px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 88%;}
|
||||
.default-input {max-width: 82%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: hidden;}
|
||||
#logo-right {visibility: visible;}
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 900px;}
|
||||
.content-box__input-box {max-width: 900px;}
|
||||
.content-box__right-box {max-width: 900px;}
|
||||
.content-box__text-box {max-width: 900px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 85%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: hidden;}
|
||||
#logo-right {visibility: visible;}
|
||||
}
|
||||
@media only screen and (max-width: 900px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 800px;}
|
||||
.content-box__input-box {max-width: 800px;}
|
||||
.content-box__right-box {max-width: 800px;}
|
||||
.content-box__text-box {max-width: 800px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 85%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 700px;}
|
||||
.content-box__input-box {max-width: 700px;}
|
||||
.content-box__right-box {max-width: 700px;}
|
||||
.content-box__text-box {max-width: 700px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 83%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 600px;}
|
||||
.content-box__input-box {max-width: 600px;}
|
||||
.content-box__right-box {max-width: 600px;}
|
||||
.content-box__text-box {max-width: 600px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 83%;}
|
||||
.default-input {max-width: 75%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 500px;}
|
||||
.content-box__input-box {max-width: 500px;}
|
||||
.content-box__right-box {max-width: 500px;}
|
||||
.content-box__text-box {max-width: 500px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 80%;}
|
||||
.default-input {max-width: 70%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 450px;}
|
||||
.content-box__input-box {max-width: 450px;}
|
||||
.content-box__right-box {max-width: 450px;}
|
||||
.content-box__text-box {max-width: 450px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 75%;}
|
||||
.default-input {max-width: 65%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
/*iPhone 6/7/8 Plus*/
|
||||
@media only screen and (max-width: 414px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 390px;}
|
||||
.content-box__input-box {max-width: 390px;}
|
||||
.content-box__right-box {max-width: 390px;}
|
||||
.content-box__text-box {max-width: 390px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 75%;}
|
||||
.default-input {max-width: 63%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
/*iPhone 6/7/8*/
|
||||
@media only screen and (max-width: 375px) {
|
||||
#left_side {visibility: collapse;}
|
||||
.content-box__info-box {max-width: 350px;}
|
||||
.content-box__input-box {max-width: 350px;}
|
||||
.content-box__right-box {max-width: 350px;}
|
||||
.content-box__text-box {max-width: 350px;}
|
||||
.container {margin-left: 0px;}
|
||||
.option-section {display: none;}
|
||||
.default-button {left: 70%;}
|
||||
.default-input {max-width: 57%;}
|
||||
.version_path {visibility: hidden;}
|
||||
.content-box__headline {padding: 50px 0 0 0;}
|
||||
.header .site-title-box__text {visibility: hidden;}
|
||||
#logo-left {visibility: visible;}
|
||||
#logo-right {visibility: hidden;}
|
||||
}
|
||||
/*========================================================================== END*/
|
||||
.grid-header {grid-area: header}
|
||||
@ -37,6 +37,7 @@ along with this program. If not, see www.gnu.org/licenses/
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link id="main_style_sheet" data-lift="WebUI.mainStyleSheet" rel="stylesheet" href="./media/css/style.css" />
|
||||
<link id="override_style_sheet" data-lift="WebUI.overrideStyleSheet" href="" rel="stylesheet" type="text/css" />
|
||||
<link id="screen_style_sheet" rel="stylesheet" media="screen and (min-width: 100px)" href="./media/css/screen.css" />
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user