mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Changed button layout on main page /IRC button removed temporarily/
Remade design on passwordgen page
This commit is contained in:
ndaniel1102
commit
49eae83f81
42 changed files with 6682 additions and 605 deletions
|
|
@ -1,13 +1,11 @@
|
|||
import styles from './button.module.css'
|
||||
|
||||
export default function Button (props) {
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<div>
|
||||
<center>
|
||||
<a href={props.href}>
|
||||
<div className={styles.ircLink}>
|
||||
{props.text}
|
||||
</div>
|
||||
<div className={styles.ircLink}>{props.text}</div>
|
||||
</a>
|
||||
</center>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
class Question extends PureComponent {
|
||||
render () {
|
||||
render() {
|
||||
const { question } = this.props
|
||||
|
||||
let qdata = question.data
|
||||
|
|
@ -15,16 +15,10 @@ class Question extends PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='questionContainer'>
|
||||
<div className='question'>
|
||||
{question.Q}
|
||||
</div>
|
||||
<div className='answer'>
|
||||
{question.A}
|
||||
</div>
|
||||
<div className='data'>
|
||||
{qdata || null}
|
||||
</div>
|
||||
<div className="questionContainer">
|
||||
<div className="question">{question.Q}</div>
|
||||
<div className="answer">{question.A}</div>
|
||||
<div className="data">{qdata || null}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Question from './Question.js'
|
|||
import styles from './Questions.module.css'
|
||||
|
||||
class Questions extends PureComponent {
|
||||
render () {
|
||||
render() {
|
||||
const { subjs } = this.props
|
||||
|
||||
return (
|
||||
|
|
@ -13,16 +13,9 @@ class Questions extends PureComponent {
|
|||
{subjs.map((subj, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
<div className={styles.subjName}>
|
||||
{subj.Name}
|
||||
</div>
|
||||
{ subj.Questions.map((question, i) => {
|
||||
return (
|
||||
<Question
|
||||
key={i}
|
||||
question={question}
|
||||
/>
|
||||
)
|
||||
<div className={styles.subjName}>{subj.Name}</div>
|
||||
{subj.Questions.map((question, i) => {
|
||||
return <Question key={i} question={question} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,26 +3,19 @@ import React, { PureComponent } from 'react'
|
|||
import Question from './Question.js'
|
||||
|
||||
class Subject extends PureComponent {
|
||||
render () {
|
||||
render() {
|
||||
const { subj } = this.props
|
||||
|
||||
if (subj) {
|
||||
return (
|
||||
<div >
|
||||
<div>
|
||||
{subj.Questions.map((question, i) => {
|
||||
return (
|
||||
<Question
|
||||
key={i}
|
||||
question={question}
|
||||
/>
|
||||
)
|
||||
return <Question key={i} question={question} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div />
|
||||
)
|
||||
return <div />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import styles from './SubjectSelector.module.css'
|
||||
|
||||
export default function SubjectSelector (props) {
|
||||
export default function SubjectSelector(props) {
|
||||
const { activeSubjName, searchTerm, data, onSubjSelect } = props
|
||||
|
||||
return (
|
||||
<div className='subjectSelector'>
|
||||
<div className="subjectSelector">
|
||||
{data.map((subj, i) => {
|
||||
if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
|
||||
return null
|
||||
|
|
@ -12,16 +12,15 @@ export default function SubjectSelector (props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={activeSubjName === subj.Name
|
||||
? 'subjItem activeSubjItem'
|
||||
: 'subjItem'
|
||||
className={
|
||||
activeSubjName === subj.Name
|
||||
? 'subjItem activeSubjItem'
|
||||
: 'subjItem'
|
||||
}
|
||||
key={i}
|
||||
onClick={() => onSubjSelect(subj.Name)}
|
||||
>
|
||||
<span className={styles.subjName}>
|
||||
{subj.Name}
|
||||
</span>
|
||||
<span className={styles.subjName}>{subj.Name}</span>
|
||||
<span className={styles.questionCount}>
|
||||
[ {subj.Questions.length} ]
|
||||
</span>
|
||||
|
|
|
|||
227
src/components/comments.js
Normal file
227
src/components/comments.js
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import ReactButton from './reactButton.js'
|
||||
import Modal from './modal.js'
|
||||
|
||||
import styles from './comments.module.css'
|
||||
|
||||
function CommentInput({ onSubmit, onCancel }) {
|
||||
const [val, setVal] = useState('')
|
||||
return (
|
||||
<div className={styles.commentAreaContainer}>
|
||||
<textarea
|
||||
autoFocus
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
onSubmit(val)
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
onCancel()
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
|
||||
const [displayed, setDisplayed] = useState(true)
|
||||
const [commenting, setCommenting] = useState(false)
|
||||
const { content, subComments, date, user, reacts, admin } = comment
|
||||
const own = uid === user
|
||||
|
||||
const commentStyle = admin
|
||||
? styles.adminComment
|
||||
: own
|
||||
? styles.ownComment
|
||||
: ''
|
||||
|
||||
return (
|
||||
<div className={styles.comment}>
|
||||
<div className={`${styles.commentData} ${commentStyle}`}>
|
||||
<div className={styles.commentHeader}>
|
||||
<div className={styles.userContainer}>
|
||||
<div
|
||||
className={styles.showHide}
|
||||
onClick={() => {
|
||||
setDisplayed(!displayed)
|
||||
}}
|
||||
>
|
||||
{displayed ? '[-]' : '[+]'}
|
||||
</div>
|
||||
<div>User #{user}</div>
|
||||
</div>
|
||||
<div>{date}</div>
|
||||
</div>
|
||||
<div className={`${!displayed && styles.hidden}`}>
|
||||
<div className={styles.commentText}> {content}</div>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
setCommenting(true)
|
||||
}}
|
||||
>
|
||||
Reply...
|
||||
</span>
|
||||
{own && (
|
||||
<span
|
||||
onClick={() => {
|
||||
onDelete([index])
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</span>
|
||||
)}
|
||||
<ReactButton
|
||||
onClick={(reaction, isDelete) => {
|
||||
onReact([index], reaction, isDelete)
|
||||
}}
|
||||
uid={uid}
|
||||
existingReacts={reacts}
|
||||
/>
|
||||
</div>
|
||||
{commenting && (
|
||||
<CommentInput
|
||||
onCancel={() => {
|
||||
setCommenting(false)
|
||||
}}
|
||||
onSubmit={(e) => {
|
||||
onComment([index], e)
|
||||
setCommenting(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${!displayed && styles.hidden}`}>
|
||||
{subComments &&
|
||||
subComments.map((sc, i) => {
|
||||
return (
|
||||
<Comment
|
||||
comment={sc}
|
||||
onReact={(path, reaction, isDelete) => {
|
||||
onReact([...path, index], reaction, isDelete)
|
||||
}}
|
||||
onDelete={(path) => {
|
||||
onDelete([...path, index])
|
||||
}}
|
||||
onComment={(path, content) => {
|
||||
onComment([...path, index], content)
|
||||
}}
|
||||
index={i}
|
||||
key={i}
|
||||
uid={uid}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function countComments(comments) {
|
||||
return comments.reduce((acc, comment) => {
|
||||
if (comment.subComments) {
|
||||
acc += countComments(comment.subComments) + 1
|
||||
} else {
|
||||
acc += 1
|
||||
}
|
||||
return acc
|
||||
}, 0)
|
||||
}
|
||||
|
||||
export default function Comments({
|
||||
comments,
|
||||
onComment,
|
||||
onDelete,
|
||||
onReact,
|
||||
uid,
|
||||
}) {
|
||||
const [addingNewComment, setAddingNewComment] = useState(false)
|
||||
const [commentsShowing, setCommentsShowing] = useState(false)
|
||||
const commentCount = comments ? countComments(comments) : 0
|
||||
|
||||
return (
|
||||
<div>
|
||||
{commentsShowing ? (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setCommentsShowing(false)
|
||||
}}
|
||||
>
|
||||
{comments && comments.length > 0
|
||||
? comments.map((comment, i) => {
|
||||
return (
|
||||
<Comment
|
||||
onReact={onReact}
|
||||
onComment={onComment}
|
||||
onDelete={onDelete}
|
||||
comment={comment}
|
||||
index={i}
|
||||
key={i}
|
||||
uid={uid}
|
||||
/>
|
||||
)
|
||||
})
|
||||
: null}
|
||||
{commentCount !== 0 ? (
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
setAddingNewComment(true)
|
||||
}}
|
||||
>
|
||||
New comment
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{addingNewComment ? (
|
||||
<CommentInput
|
||||
onSubmit={(e) => {
|
||||
if (!e) {
|
||||
alert('Írj be valamit, hogy kommentelhess...')
|
||||
return
|
||||
}
|
||||
setAddingNewComment(false)
|
||||
onComment([], e)
|
||||
}}
|
||||
onCancel={() => {
|
||||
setAddingNewComment(false)
|
||||
if (commentCount === 0) {
|
||||
setCommentsShowing(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</Modal>
|
||||
) : null}
|
||||
<div
|
||||
className={'actions'}
|
||||
onClick={() => {
|
||||
setCommentsShowing(true)
|
||||
if (commentCount === 0) {
|
||||
setAddingNewComment(true)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{commentCount === 0
|
||||
? 'New comment'
|
||||
: `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
src/components/comments.module.css
Normal file
57
src/components/comments.module.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.comment {
|
||||
margin-left: 25px;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
|
||||
.commentData {
|
||||
padding: 5px 2px;
|
||||
border-left: 2px solid var(--text-color);
|
||||
}
|
||||
|
||||
.commentHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.commentHeader > div {
|
||||
font-weight: bold;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.userContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.userContainer > div {
|
||||
padding: 0px 3px;
|
||||
}
|
||||
|
||||
.commentText {
|
||||
margin: 2px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.ownComment {
|
||||
border-left: 2px solid green;
|
||||
}
|
||||
|
||||
.showHide {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commentAreaContainer {
|
||||
margin: 0px 8px 3px 8px;
|
||||
}
|
||||
|
||||
.commentAreaContainer > div {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.adminComment {
|
||||
border-left: 2px solid yellow;
|
||||
}
|
||||
119
src/components/composer.js
Normal file
119
src/components/composer.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import Modal from './modal'
|
||||
|
||||
import styles from './composer.module.css'
|
||||
|
||||
function FileUploader({ onChange }) {
|
||||
return (
|
||||
<div className={styles.inputArea}>
|
||||
<div className={styles.textTitle}>Fájl csatolása</div>
|
||||
<input
|
||||
className={styles.fileInput}
|
||||
type="file"
|
||||
name="file"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Composer({ onSubmit }) {
|
||||
const [editorShowing, setEditorShowing] = useState(false)
|
||||
const [val, setVal] = useState('')
|
||||
const [type, setType] = useState('public')
|
||||
const [title, setTitle] = useState('')
|
||||
const [file, setFile] = useState()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onClick={() => {
|
||||
setEditorShowing(true)
|
||||
}}
|
||||
className={styles.new}
|
||||
>
|
||||
Új bejegyzés / feedback
|
||||
</div>
|
||||
{editorShowing && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
{type !== 'private' && (
|
||||
<input
|
||||
placeholder={'Téma'}
|
||||
value={title}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<textarea
|
||||
placeholder={'...'}
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
{type === 'private' && (
|
||||
<FileUploader
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files[0])
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.typeSelector}>
|
||||
<div>Post típusa:</div>
|
||||
<div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
|
||||
<input
|
||||
onChange={(e) => {
|
||||
setType(e.target.value)
|
||||
}}
|
||||
type="radio"
|
||||
name="type"
|
||||
value="public"
|
||||
defaultChecked
|
||||
/>
|
||||
Publikus
|
||||
</div>
|
||||
<div title="Csak a weboldal üzemeltetője látja">
|
||||
<input
|
||||
onChange={(e) => {
|
||||
setType(e.target.value)
|
||||
}}
|
||||
type="radio"
|
||||
name="type"
|
||||
value="private"
|
||||
/>
|
||||
Privát
|
||||
</div>
|
||||
<div className={styles.tip}>
|
||||
(Tartsd egered opciókra több infóért)
|
||||
</div>
|
||||
</div>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
onSubmit(type, title, val, file)
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
Post
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
33
src/components/composer.module.css
Normal file
33
src/components/composer.module.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.container > input,
|
||||
.container > textarea {
|
||||
margin: 5px 0px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.typeSelector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 10px;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.new {
|
||||
text-align: center;
|
||||
background-color: #191919;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.new:hover {
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.listItem:hover {
|
||||
background-color: #666;
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -80,11 +80,15 @@ export default function Layout({
|
|||
<div />
|
||||
</span>
|
||||
<div className="sidebarheader">
|
||||
<Link href="/"><a><img
|
||||
style={{ maxWidth: '100%' }}
|
||||
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
|
||||
alt="Frylabs"
|
||||
/></a></Link>
|
||||
<Link href="/">
|
||||
<a>
|
||||
<img
|
||||
style={{ maxWidth: '100%' }}
|
||||
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
|
||||
alt="Frylabs"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{sidebarOpen ? (
|
||||
|
|
@ -112,9 +116,9 @@ export default function Layout({
|
|||
rel="noreferrer"
|
||||
>
|
||||
Donate
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
<div className="userStatus">
|
||||
<div className="userStatus">
|
||||
<div className="msgs">
|
||||
<div
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default function Modal(props) {
|
|||
❌
|
||||
</div>
|
||||
)}
|
||||
{props.children}
|
||||
<div className={styles.children}>{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.modal {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -8,16 +9,19 @@
|
|||
}
|
||||
|
||||
.modalContent {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
max-height: 80%;
|
||||
width: 80%;
|
||||
position: fixed;
|
||||
background: var(--background-color);
|
||||
width: 70%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
|
||||
padding: 20px;
|
||||
padding: 20px 30px;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -26,8 +30,14 @@
|
|||
font-size: 18px;
|
||||
position: absolute;
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.children {
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
67
src/components/newsEntry.js
Normal file
67
src/components/newsEntry.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React from 'react'
|
||||
|
||||
import ReactButton from './reactButton.js'
|
||||
import Comments from './comments.js'
|
||||
|
||||
import styles from './newsEntry.module.css'
|
||||
|
||||
export default function NewsEntry({
|
||||
newsItem,
|
||||
uid,
|
||||
onCommentReact,
|
||||
onNewsReact,
|
||||
onComment,
|
||||
onDelete,
|
||||
onPostDelete,
|
||||
}) {
|
||||
const { reacts, title, content, user, comments, date, admin } = newsItem
|
||||
|
||||
return (
|
||||
<div className={styles.newsRoot}>
|
||||
<div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
|
||||
<div className={styles.newsHeader}>
|
||||
<div className={styles.newsTitle}>{title}</div>
|
||||
<div className={styles.user}>
|
||||
<div>User #{user}</div>
|
||||
<div className={styles.newsDate}>{date}</div>
|
||||
</div>
|
||||
</div>
|
||||
{admin ? (
|
||||
<div
|
||||
className={styles.newsBody}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.newsBody}>{content}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={'actions'}>
|
||||
{uid === user ? (
|
||||
<span
|
||||
onClick={() => {
|
||||
onPostDelete()
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</span>
|
||||
) : null}
|
||||
<ReactButton
|
||||
existingReacts={reacts}
|
||||
uid={uid}
|
||||
onClick={(reaction, isDelete) => {
|
||||
onNewsReact({ reaction, isDelete })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Comments
|
||||
uid={uid}
|
||||
onReact={(path, reaction, isDelete) => {
|
||||
onCommentReact({ path, reaction, isDelete })
|
||||
}}
|
||||
onComment={onComment}
|
||||
onDelete={onDelete}
|
||||
comments={comments}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
45
src/components/newsEntry.module.css
Normal file
45
src/components/newsEntry.module.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.newsBody {
|
||||
margin: 0px 5px;
|
||||
color: #fff;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.newsTitle {
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.newsDate {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.newsContainer {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
|
||||
.adminPost {
|
||||
border-left: 2px solid yellow;
|
||||
}
|
||||
|
||||
.newsContainer img {
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.newsHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.newsRoot {
|
||||
background-color: #191919;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
107
src/components/reactButton.js
Normal file
107
src/components/reactButton.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import Tooltip from './tooltip.js'
|
||||
|
||||
import styles from './reactButton.module.css'
|
||||
import reactions from '../data/reactions.json'
|
||||
|
||||
function ExistingReacts({ existingReacts, onClick, uid }) {
|
||||
return (
|
||||
<div className={styles.reactionContainer}>
|
||||
<div>React</div>
|
||||
{existingReacts &&
|
||||
Object.keys(existingReacts).map((key) => {
|
||||
const currReact = existingReacts[key]
|
||||
const react = reactions[key]
|
||||
if (!react) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div
|
||||
title={currReact.join(', ')}
|
||||
className={`${currReact.includes(uid) && styles.reacted}`}
|
||||
key={key}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClick(key, currReact.includes(uid))
|
||||
}}
|
||||
>
|
||||
{react.emoji} {currReact.length}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RenderEmojis({ onClick }) {
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Keresés..."
|
||||
onChange={(event) => {
|
||||
setSearch(event.target.value)
|
||||
}}
|
||||
/>
|
||||
{Object.keys(reactions).map((key) => {
|
||||
const reaction = reactions[key]
|
||||
if (!key.includes(search.toLowerCase())) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div
|
||||
title={key}
|
||||
key={key}
|
||||
onClick={() => {
|
||||
onClick(key)
|
||||
}}
|
||||
>
|
||||
{reaction.emoji}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ReactButton({ onClick, existingReacts, uid }) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.reactContainer}
|
||||
onClick={() => {
|
||||
setOpened(true)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
opened={opened}
|
||||
text={() => (
|
||||
<ExistingReacts
|
||||
uid={uid}
|
||||
onClick={(key, isDelete) => {
|
||||
onClick(key, isDelete)
|
||||
setOpened(false)
|
||||
}}
|
||||
existingReacts={existingReacts}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<div className={styles.reactionContainer}>
|
||||
<RenderEmojis
|
||||
onClick={(e) => {
|
||||
// setOpened(false)
|
||||
onClick(e)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/components/reactButton.module.css
Normal file
40
src/components/reactButton.module.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.reactionContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reactionContainer > input {
|
||||
width: 100%;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin: 2px 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reactionContainer > div {
|
||||
margin: 2px 2px;
|
||||
padding: 0px 10px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.reactionContainer > div:hover {
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.break {
|
||||
flex-basis: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.reacted {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.reactContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.container {
|
||||
background-color: var(--background-color);
|
||||
border-left: 3px solid #99f;
|
||||
border-left: 3px solid var(--text-color);
|
||||
top: 0;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
import constants from '../constants.json'
|
||||
|
||||
export default function Sleep (props) {
|
||||
export default function Sleep(props) {
|
||||
const hours = new Date().getHours()
|
||||
if (hours < 4 || hours > 23) {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<center>
|
||||
<img
|
||||
style={{
|
||||
margin: '10px',
|
||||
width: '300px',
|
||||
border: '2px solid white'
|
||||
border: '2px solid white',
|
||||
}}
|
||||
src={constants.siteUrl + 'img/aludni.jpeg'} title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
|
||||
src={constants.siteUrl + 'img/aludni.jpeg'}
|
||||
title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
|
||||
/>
|
||||
</center>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: #99f;
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #99f;
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
border: 2px solid #99f;
|
||||
border: 2px solid var(--text-color);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
11
src/components/tooltip.js
Normal file
11
src/components/tooltip.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import styles from './tooltip.module.css'
|
||||
|
||||
export default function Tooltip({ children, text, opened }) {
|
||||
return (
|
||||
<div className={styles.tooltip}>
|
||||
{text()}
|
||||
{opened && <span className={styles.tooltiptext}>{children}</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
28
src/components/tooltip.module.css
Normal file
28
src/components/tooltip.module.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
width: 300px;
|
||||
max-width: 300px;
|
||||
height: 250px;
|
||||
max-height: 250px;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
bottom: 100%;
|
||||
left: 0%;
|
||||
margin-left: -60px;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.container {
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue