albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style and layout improvements on modals

Browse source 
/posting modal still needs some fixing tho/
This commit is contained in:
ndaniel1102 2021-03-14 01:27:01 +01:00
parent cdc2b3fd66
commit b0cbc5aa5e
10 changed files with 606 additions and 5426 deletions
Download patch file Download diff file Expand all files Collapse all files

5296
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -13,6 +13,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"babel-eslint": "^10.1.0",
"eslint-plugin-react": "^7.21.5", "eslint-plugin-react": "^7.21.5",
"next": "^10.0.3", "next": "^10.0.3",
"react": "^16.13.0", "react": "^16.13.0",

2
src/components/comments.js
View file

@ -63,7 +63,7 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
</div> </div>
<div>User #{user}</div> <div>User #{user}</div>
</div> </div>
<div>{date}</div> <div className={styles.commentDate}>{date}</div>
</div> </div>
<div className={`${!displayed && styles.hidden}`}> <div className={`${!displayed && styles.hidden}`}>
<div className={styles.commentText}> {content}</div> <div className={styles.commentText}> {content}</div>

9
src/components/comments.module.css
View file

@ -36,7 +36,8 @@
} }
.comment { .comment {
margin-left: 25px; margin-left: 10px;
margin-right: 30px;
padding: 8px 0px; padding: 8px 0px;
} }
@ -45,9 +46,13 @@
border-left: 3px solid azure; border-left: 3px solid azure;
} }
.commentDate {
text-align: right;
}
.commentHeader { .commentHeader {
display: flex; display: flex;
justify-content: space-between; /*justify-content: space-between;*/
} }
.commentHeader > div { .commentHeader > div {

27
src/components/composer.js
View file

@ -44,7 +44,8 @@ export default function Composer({ onSubmit }) {
<div className={styles.container}> <div className={styles.container}>
{type !== 'private' && ( {type !== 'private' && (
<input <input
placeholder={'Téma'} placeholder={'Téma...'}
required
value={title} value={title}
onChange={(e) => { onChange={(e) => {
setTitle(e.target.value) setTitle(e.target.value)
@ -52,7 +53,8 @@ export default function Composer({ onSubmit }) {
/> />
)} )}
<textarea <textarea
placeholder={'...'} placeholder={'Írj ide valamit...'}
required
value={val} value={val}
onChange={(e) => { onChange={(e) => {
setVal(e.target.value) setVal(e.target.value)
@ -65,9 +67,9 @@ export default function Composer({ onSubmit }) {
}} }}
/> />
)} )}
<div id="radiolabel"><p><b>A poszt típusa:</b></p></div>
<div className={styles.typeSelector}> <div className={styles.typeSelector}>
<div>Post típusa:</div> <div title="A főoldalon mindenki láthatja, reagálhat rá és kommentelhet alá">
<div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
<input <input
onChange={(e) => { onChange={(e) => {
setType(e.target.value) setType(e.target.value)
@ -79,7 +81,7 @@ export default function Composer({ onSubmit }) {
/> />
Publikus Publikus
</div> </div>
<div title="Csak a weboldal üzemeltetője látja"> <div title="Csak admin bácsi látja">
<input <input
onChange={(e) => { onChange={(e) => {
setType(e.target.value) setType(e.target.value)
@ -90,25 +92,18 @@ export default function Composer({ onSubmit }) {
/> />
Privát Privát
</div> </div>
</div>
<div className={styles.tip}> <div className={styles.tip}>
(Tartsd egered opciókra több infóért) <b>Tipp:</b> vidd a kurzort a poszt-típusok fölé több infóért!
</div> </div>
</div> <div className={styles.composerAction}>
<div className={'actions'}>
<span <span
onClick={() => { onClick={() => {
onSubmit(type, title, val, file) onSubmit(type, title, val, file)
setEditorShowing(false) setEditorShowing(false)
}} }}
> >
Post Posztolás
</span>
<span
onClick={() => {
setEditorShowing(false)
}}
>
Cancel
</span> </span>
</div> </div>
</div> </div>

60
src/components/composer.module.css
View file

@ -1,22 +1,37 @@
.container { .container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-width: 400px;
} }
.container > input, .container > input,
.container > textarea { .container > textarea {
margin: 5px 0px; margin: 5px 0px;
padding: 4px; padding: 4px;
} width: 97%;
border-color: #5d5f61;
background-color: #1f2021;
border-radius: 5px;
font-size: 15px;
}
.container > textarea {
margin-left: 1px;
width: 99%;
resize: none;
}
.typeSelector { .typeSelector {
display: flex; display:inline-flex;
align-items: center; text-align: center;
margin-left: 6px;
} }
.tip { .tip {
font-size: 10px; font-size: 11px;
margin: 0px 10px; font-style: italic;
text-align: center;
margin: 15px 0px 2px 2px;
} }
.new { .new {
@ -28,6 +43,35 @@
padding: 8px; padding: 8px;
} }
.new:hover { .new:hover {
background-color: var(--hoover-color); background-color: var(--hoover-color);
}
.composerAction {
display: flex;
align-items: center;
justify-content: center;
width: 36%;
height: 100%;
} }
.composerAction > span {
margin: 2px 2px;
padding: 0px 10px;
border: 1px solid #444;
border-radius: 5px;
cursor: pointer;
user-select: none;
font-size: 15px;
margin-top: 14.5px !important;
padding-top: 4px !important;
transform: translate(109%, 10%);
transition: width 0.5s, height 0.5s, ease-in 0.5s;
}
.composerAction > span:hover {
background-color: var(--hoover-color);
transition: width 0.5s, height 0.5s, ease-out 0.5s;
color: var(--text-color);
text-shadow: 2px 1.5px 10px black;
}

22
src/components/dbSelector.module.css
View file

@ -1,23 +1,33 @@
.container { .container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
margin-top: 8px;
margin-bottom: 0px;
margin-right: 22%;
margin-left: 22%;
padding: 5px; padding: 5px;
} }
.listItem { .listItem {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center;
padding: 5px; padding-top: 10px;
padding-bottom: 10px;
margin: 3px;
cursor: pointer; cursor: pointer;
color: white; color: #a1a1a1;
transition: width 0.5s, height 0.5s, ease-in 0.5s;
} }
.listItem:hover { .listItem:hover {
background-color: var(--hoover-color); background-color: var(--hoover-color);
} transition: width 0.5s, height 0.5s, ease-out 0.5s;
text-shadow: 2px 1.5px 10px black;
color: var(--text-color);
}
.text { .text {
text-align: center; text-align: center;
color: gainsboro;
} }

25
src/components/modal.module.css
View file

@ -12,7 +12,9 @@
display: flex; display: flex;
align-items: stretch; align-items: stretch;
max-height: 80%; max-height: 80%;
width: 80%; width: 50%;
max-width: 52%;
width: auto;
position: fixed; position: fixed;
background: var(--background-color); background: var(--background-color);
height: auto; height: auto;
@ -20,24 +22,27 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 8px; border-radius: 8px;
padding-top: 38px;
padding: 20px 30px; padding-bottom: 25px;
cursor: auto; padding-right: 14px;
padding-left: 16px;
cursor: default;
} }
.close { .close {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 16.5px;
position: absolute; position: fixed;
top: 5px;
top: 10px;
right: 10px; right: 10px;
margin-bottom: 10px;
text-align: right;
display: inline; display: inline;
} }
.children { .children {
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: auto;
overflow-x: hidden; overflow-x: auto;
} }

46
src/defaultStyles.css
View file

@ -1,6 +1,6 @@
:root { :root {
--text-color: #f2cb05; --text-color: #f2cb05;
--primary-color: #9999ff; --primary-color: #f2cb05;
--bright-color: #f2f2f2; --bright-color: #f2f2f2;
--background-color: #222426; --background-color: #222426;
--hoover-color: #393939; --hoover-color: #393939;
@ -22,9 +22,9 @@ a {
color: white; color: white;
} }
a:hover { a:hover {
color: #c1c1c1; color: #c1c1c1;
} }
textarea { textarea {
color: var(--text-color); color: var(--text-color);
@ -56,7 +56,6 @@ input {
.sidebar { .sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 200px; width: 200px;
@ -84,24 +83,24 @@ input {
transition: width 0.5s, height 0.5s, ease-in 0.5s; transition: width 0.5s, height 0.5s, ease-in 0.5s;
} }
.sidebarLinks a:hover { .sidebarLinks a:hover {
transition: width 0.5s, height 0.5s, ease-out 0.5s; transition: width 0.5s, height 0.5s, ease-out 0.5s;
} }
.sidebarLinks a.active { .sidebarLinks a.active {
border: 0.5px solid var(--text-color); border: 0.5px solid var(--text-color);
color: white; color: white;
text-shadow: 2px 2px 8px black; text-shadow: 2px 2px 8px black;
font-weight: bold; font-weight: bold;
} }
.sidebarLinks a:hover:not(.active) { .sidebarLinks a:hover:not(.active) {
background-color: var(--text-color); background-color: var(--text-color);
color: black; color: black;
font-weight: bold; font-weight: bold;
text-shadow: 2px 2px 8px black; text-shadow: 2px 2px 8px black;
transition: width 0.5s, height 0.5s, ease-out 0.5s; transition: width 0.5s, height 0.5s, ease-out 0.5s;
} }
.menuicon div { .menuicon div {
height: 5px; height: 5px;
@ -137,9 +136,11 @@ input {
height: auto; height: auto;
position: relative; position: relative;
} }
.sidebar a { .sidebar a {
float: left; float: left;
} }
div.content { div.content {
margin-left: 0; margin-left: 0;
} }
@ -203,9 +204,9 @@ input {
margin: 10px; margin: 10px;
} }
.questionContainer:hover { .questionContainer:hover {
background-color: var(--hoover-color); background-color: var(--hoover-color);
} }
.question { .question {
word-wrap: break-word; word-wrap: break-word;
@ -228,7 +229,6 @@ input {
.loadingindicator { .loadingindicator {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
} }
@ -298,12 +298,12 @@ input {
margin: 5px 0px 0px 0px; margin: 5px 0px 0px 0px;
} }
.pageHeader h1 { .pageHeader h1 {
padding-top: 6px; padding-top: 6px;
letter-spacing: 7px; letter-spacing: 7px;
text-align: center; text-align: center;
margin: 0px; margin: 0px;
} }
.manualUsage { .manualUsage {
margin-top: 5px; margin-top: 5px;
@ -321,9 +321,9 @@ select {
height: 30px; height: 30px;
} }
select:hover { select:hover {
border: 1px solid #F2CB05; border: 1px solid #F2CB05;
} }
.userStatus { .userStatus {
display: flex; display: flex;
@ -346,9 +346,9 @@ select:hover {
font-size: 15.5px; font-size: 15.5px;
} }
.logout:hover { .logout:hover {
color: #fff; color: #fff;
} }
.msgs :first-child { .msgs :first-child {
font-size: 27px; font-size: 27px;
@ -365,15 +365,15 @@ select:hover {
align-items: center; align-items: center;
} }
.actions > span { .actions > span {
margin: 2px 2px; margin: 2px 2px;
padding: 0px 10px; padding: 0px 10px;
border: 1px solid #444; border: 1px solid #444;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.actions > span:hover { .actions > span:hover {
background-color: var(--hoover-color); background-color: var(--hoover-color);
} }

2
src/pages/index.js
View file

@ -303,7 +303,7 @@ export default function Index({ globalData }) {
if (allQrSelector) { if (allQrSelector) {
return ( return (
<DbSelector <DbSelector
text={`Válaszd ki melyik adatbázist szeretnéd letölteni (${allQrSelector}):`} text={`Válaszd ki melyik adatbázist szeretnéd letölteni!`}
showAll={allQrSelector === 'txt'} showAll={allQrSelector === 'txt'}
closeClick={() => { closeClick={() => {
setAllQrSelector(null) setAllQrSelector(null)