diff --git a/public/css/index.css b/public/css/index.css index d3444bd..c4472b8 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -596,6 +596,83 @@ header .redirect-button:hover { margin: 0px 0.5vw; font-size: 1vw; } +.control-panel .action-form { + box-sizing: border-box; + padding: 0px 16.5vw; +} +.control-panel .action-form form { + height: 100%; + max-width: 742px; + display: flex; + flex-direction: column; + justify-content: space-around; + padding-top: 3vh; +} +.control-panel .action-form form select { + height: 4vh; + outline: none; +} +.control-panel .action-form form textarea { + resize: none; + outline: none; + font-family: Arial, Helvetica, sans-serif; +} +.control-panel .action-form form input[type=submit] { + font-size: 12pt; + margin-top: 1vh; + height: 5vh; + background-color: #2f71d5; + color: #fff; + border: none; + border: 1px solid #5597fc; +} +.control-panel .action-form form input[type=submit]:hover { + background-color: #397de5; +} +.control-panel .action-form form input[type=text] { + height: 5vh; + font-family: Arial, Helvetica, sans-serif; + font-size: 2vw; + border: none; + border-bottom: 1px solid #a2a2a2; +} +.control-panel .action-form.add-word form select { + margin-bottom: 0.5vh; +} +.control-panel .action-form.add-word form textarea { + margin-top: 2vh; +} +.control-panel .action-form.add-category form input[type=text] { + margin-bottom: 1vh; +} +.control-panel .action-form.delete-word form select { + margin-bottom: 0.5vh; +} +.control-panel .action-form.edit-word form select { + margin-bottom: 0.5vh; +} +@media (max-width: 991.98px) { + .control-panel .action-form form input[type=submit] { + font-size: 2.4vw; + } +} +@media (max-width: 576px) { + .control-panel .action-form { + padding-left: 0; + padding-right: 0; + } + .control-panel .action-form form select { + border: none; + border-bottom: 1px solid #a2a2a2; + background-color: #fff; + } + .control-panel .action-form form input[type=submit] { + font-size: 12pt; + } + .control-panel .action-form form input[type=text] { + font-size: 12pt; + } +} @media (max-width: 991.98px) { .control-panel .buttons-container { @@ -622,10 +699,11 @@ header .redirect-button:hover { align-content: stretch; } .control-panel .buttons-container.nav-mode button { + transition: 0.4 ease-in-out; box-sizing: border-box; height: 8vh; border-radius: 0; - min-width: 50vw; + width: 50vw; flex-grow: 1; align-self: stretch; margin: 0; @@ -637,10 +715,6 @@ header .redirect-button:hover { -webkit-transform: none; transform: none; box-shadow: none; - -webkit-transition-duration: none; - transition-duration: none; - -webkit-transition-property: none; - transition-property: none; } .control-panel .buttons-container.nav-mode button:hover, .control-panel .buttons-container.nav-mode button:focus, .control-panel .buttons-container.nav-mode button:active { -webkit-transform: none; @@ -650,5 +724,13 @@ header .redirect-button:hover { transform: none; } } +@media (max-width: 576px) { + .control-panel .buttons-container button { + font-size: 12pt; + } + .control-panel .buttons-container.nav-mode button { + font-size: 12pt; + } +} /*# sourceMappingURL=index.css.map */ diff --git a/public/css/index.css.map b/public/css/index.css.map index abf02c2..f274b68 100644 --- a/public/css/index.css.map +++ b/public/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/_control-panel.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/control-panel/_control-panel.scss","../sass/control-panel/_action-form.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/public/sass/control-panel/_action-form.scss b/public/sass/control-panel/_action-form.scss new file mode 100644 index 0000000..374c6fc --- /dev/null +++ b/public/sass/control-panel/_action-form.scss @@ -0,0 +1,157 @@ +.action-form { + //height: 40vh; + + box-sizing: border-box; + padding: 0px 16.5vw; + + form { + + height: 100%; + max-width: 742px; + + display: flex; + flex-direction: column; + justify-content: space-around; + + //margin-top: 2.5vh; + padding-top: 3vh; + + //border-top: 1px solid rgb(163, 163, 163); + + select { + height: 4vh; + outline: none; + } + + textarea { + resize: none; + outline: none; + + font-family: Arial, Helvetica, sans-serif; + } + + input[type="submit"] { + + $background-color: #2f71d5; + + font-size: 12pt; + + margin-top: 1vh; + height: 5vh; + + background-color: $background-color; + color: #fff; + + border: none; + border: 1px solid adjust-color($color: $background-color, $saturation: 30%, $lightness: 15%, $alpha: 1.0); + + &:hover { + background-color: adjust-color($color: $background-color, $saturation: 10%, $lightness: 5%, $alpha: 1.0); + + } + } + + input[type="text"] { + + height: 5vh; + font-family: Arial, Helvetica, sans-serif; + font-size: 2vw; + + border: none; + border-bottom: 1px solid rgb(162, 162, 162); + } + + } + + &.add-word { + + form { + + select { + margin-bottom: 0.5vh; + } + + textarea { + + margin-top: 2vh; + } + } + } + + &.add-category { + + form { + + input[type="text"] { + + margin-bottom: 1vh; + } + } + } + + &.delete-word { + + form { + + select { + + margin-bottom: 0.5vh; + } + } + } + + &.edit-word { + + form { + + select { + + margin-bottom: 0.5vh; + } + } + } + +} + +@media (max-width: 991.98px) { + + .action-form { + + form { + + input[type="submit"] { + font-size: 2.4vw; + + } + } + } +} + +@media (max-width: 576px) { + + .action-form { + + padding-left: 0; + padding-right: 0; + + form { + + select { + + border: none; + border-bottom: 1px solid rgb(162, 162, 162); + background-color: #fff; + } + + input[type="submit"] { + font-size: 12pt; + + } + + input[type="text"] { + font-size: 12pt; + + } + } + } +} \ No newline at end of file diff --git a/public/sass/_control-panel.scss b/public/sass/control-panel/_control-panel.scss similarity index 89% rename from public/sass/_control-panel.scss rename to public/sass/control-panel/_control-panel.scss index 1502d6a..959cb44 100644 --- a/public/sass/_control-panel.scss +++ b/public/sass/control-panel/_control-panel.scss @@ -1,5 +1,7 @@ .control-panel { + // height: 80vh; + .buttons-container { height: 60vh; @@ -125,6 +127,8 @@ font-size: 1vw; } } + + @import 'action-form'; } @mixin normalizeButton() { @@ -134,10 +138,10 @@ -webkit-transform: none; transform:none; box-shadow:none; - -webkit-transition-duration:none; - transition-duration: none; - -webkit-transition-property:none; - transition-property: none; + //-webkit-transition-duration:none; + //transition-duration: none; + //-webkit-transition-property:none; + //transition-property: none; } &:hover, &:focus, &:active { @@ -186,12 +190,14 @@ button { @include normalizeButton(); + transition: 0.4 ease-in-out; + box-sizing: border-box; height: 8vh; border-radius: 0; - min-width: 50vw; + width: 50vw; flex-grow: 1; align-self: stretch; @@ -211,4 +217,22 @@ @media (max-width: 576px) { + .control-panel { + + .buttons-container { + + button { + + font-size: 12pt; + } + } + + .buttons-container.nav-mode { + + button { + + font-size: 12pt; + } + } + } } \ No newline at end of file diff --git a/public/sass/index.scss b/public/sass/index.scss index cca7500..93cdd0b 100644 --- a/public/sass/index.scss +++ b/public/sass/index.scss @@ -28,4 +28,4 @@ html, body { @import 'letter-input'; @import 'form'; @import 'message'; -@import 'control-panel'; \ No newline at end of file +@import './control-panel/control-panel'; \ No newline at end of file diff --git a/src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx b/src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx index bd32292..328cc07 100644 --- a/src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx +++ b/src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx @@ -7,7 +7,8 @@ const AddCategory = () => { return (
- + +
diff --git a/src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx b/src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx index f5328b3..3f3223f 100644 --- a/src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx +++ b/src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx @@ -7,6 +7,12 @@ const AddWord = () => { return (
+ +