style DisplayPage

frontend/src/components/CardContainer/CardContainer.css

@@ -11,10 +11,13 @@
 }
 
 .review-card {
-    padding: 50px 0;
+    text-align: center;
+    line-height: 35px;
+    padding: 50px 20px;
     width: 65vw;
+    max-width: 220px;
+    min-height: 60px;
     height: 7vh;
-    /*TODO define max height*/
     max-height: 200px;
     font-size: 24px;
     display: flex;

frontend/src/components/DayPopUp/DayPopUp.css

@@ -1,19 +1,18 @@
 #day-popup {
-    width: 70%;
+    width: 15rem;
     max-width: 500px;
     height: auto;
+    max-height: 500px;
     display: flex;
     flex-direction: column;
-    gap: 5px;
     justify-content: space-evenly;
     align-items: center;
-    overflow-y: auto;
+    margin: 0;
+    padding:  20px 20px 20px 10px;
+}
 
+#date {
+    padding: 0;
+    margin: 5px 0 20px 0;
 }
 
-button {
-    &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-}

frontend/src/components/DayPopUp/DayPopUp.tsx

@@ -23,7 +23,7 @@ export default function DayPopUp(props: Readonly<Props>) {
                 className={"close-button"}
                 aria-label={"Close popup"}>✕
         </button>
-        <h3>{displayDate}</h3>
+        <h3 id={"date"}>{displayDate}</h3>
         <VocabList vocabs={props.vocabsOfDay}
                    calendarMode={true}
                    deactivateVocab={props.deactivateVocab}

frontend/src/components/Header/Header.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Arima:wght@400;700&display=swap');
 
 #header {
-    height: 3rem;
+    height: calc(3.5rem - 18px);
     color: var(--header-font-color);
     background-color: var(--header-color);
     position: fixed;
@@ -21,10 +21,12 @@
     font-size: 30px;
     margin: 0;
     padding: 0;
+
     &:hover {
         transform: none;
         box-shadow: none;
     }
+
     background-color: inherit;
 }
 
@@ -43,6 +45,7 @@
     padding: 5px 7px;
     margin: 0;
     border: 1px solid white;
+
     &:hover {
         transform: none;
         box-shadow: none;

frontend/src/components/NavBar/NavBar.css

@@ -4,7 +4,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    height: 2rem;
+    height: calc(3rem - 40px);
     max-height: 80px;
     width: 100%;
     padding: 20px;

frontend/src/components/VocabList/VocabList.css

@@ -6,11 +6,21 @@
     padding: 0;
     display: flex;
     justify-content: center;
+    /*TODO in day pop up ist rand rechts breiter*/
     gap: 0;
     flex-wrap: wrap;
+    overflow-y: auto;
 }
 
-.list-item {
+.list-item-calendar-mode {
+    display: flex;
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 200px;
+    min-width: 100px;
+}
+
+.list-item-backlog-mode {
     display: flex;
     margin: 10px;
     padding: 25px 20px 20px 20px;
@@ -39,25 +49,39 @@
     padding: 0;
     height: 100%;
     width: 100%;
-}
+    }
 
-#vocab-word, #vocab-translation {
-    margin: 0;
-    padding: 0;
-}
 
-#vocab-info {
-    font-style: italic;
-    font-size: 13px;
-    margin: 0;
-    padding: 0;
-}
+/*TODO evtl für zu lange wörter im day pop up:*/
+/*    !*width: 200px;    *!*/
+/*    !*    white-space: nowrap;   *!*/
+/*overflow: hidden;*/
+/*text-overflow: ellipsis;*/
+
+    #vocab-word, #vocab-translation {
+        margin: 0;
+        padding: 0;
+    }
+
+    #vocab-info {
+        font-style: italic;
+        font-size: 13px;
+        margin: 0;
+        padding: 0;
+    }
+
+    /*.ellipsis-text {*/
+/*    width: 200px;            !* Setze eine feste Breite *!*/
+/*    white-space: nowrap;     !* Verhindert Zeilenumbrüche *!*/
+/*    overflow: hidden;        !* Verhindert, dass der Text über das Element hinaus geht *!*/
+/*    text-overflow: ellipsis; !* Fügt "..." hinzu, wenn der Text abgeschnitten wird *!*/
+/*}*/
 
 #vocab-list-button-wrapper {
     margin: 0;
     padding: 0;
-    height: 100%;
-    width: 30%;
+    /*height: 100%;*/
+    /*width: 30%;*/
     display: flex;
     flex-direction: column;
     right: 2px;
@@ -70,4 +94,5 @@
 
 .de_activate-button-non-editable-vocab {
     padding: 15px 5px;
-}
+}
+

frontend/src/components/VocabList/VocabList.tsx

@@ -52,60 +52,62 @@ export default function VocabList(props: Readonly<Props>) {
 
     return (<ul id={"vocab-list"} role={"list"}>
         {props.vocabs.map(vocab => <li key={vocab.id}
-                                       className={"list-item + card"}>
+                                       className={`list-item card ${props.calendarMode ?
+                                           "list-item-calendar-mode" :
+                                           "list-item-backlog-mode"}`}>
             <div id={"text-wrapper"}>
-                <p id={"vocab-word"}>{vocab.word}</p>
-                <article id={"translation-and-info-wrapper"}>
-                    <p id={"vocab-translation"}>{vocab.translation}</p>
-                    <p id={"vocab-info"}>{vocab.info}</p>
-                </article>
-            </div>
-            <div id={"vocab-list-button-wrapper"}>
-                {vocab.createdBy === props.userId && vocab.id && <button className={"vocab-list-button"}
+        <p id={"vocab-word"}>{vocab.word}</p>
+        <article id={"translation-and-info-wrapper"}>
+            <p id={"vocab-translation"}>{vocab.translation}</p>
+            <p id={"vocab-info"}>{vocab.info}</p>
+        </article>
+    </div>
+    <div id={"vocab-list-button-wrapper"}>
+        {vocab.createdBy === props.userId && vocab.id &&
+            <button className={"vocab-list-button"}
                     onClick={() => handleClickEdit(vocab.id)}
                     onKeyDown={(e) => {
                         if (e.key === 'Enter' || e.key === ' ') handleClickEdit(
                             vocab.id);
                     }}
                     aria-label={`Edit ${vocab.word}`}
-                >edit</button>}
+            >edit</button>}
 
-                <button className={vocab.createdBy === props.userId ?
-                    "vocab-list-button" :
-                    "de_activate-button-non-editable-vocab"}
-                        onClick={() => vocab.id && (props.calendarMode ?
-                            handleClickDeactivate(vocab.id) :
-                            handleClickActivate(vocab.id))}
-                        onKeyDown={(e) => {
-                            if (vocab.id &&
-                                (e.key === 'Enter' || e.key === ' ')) {
-                                if (props.calendarMode) {
-                                    handleClickDeactivate(vocab.id);
-                                } else {
-                                    handleClickActivate(vocab.id);
-                                }
-                            }
-                        }}
-                        aria-label={props.calendarMode ?
-                            `Deactivate ${vocab.word}` :
-                            `Activate ${vocab.word}`}>
-                    {props.calendarMode ? "deactivate" : "activate"}</button>
+        <button
+            className={vocab.createdBy === props.userId ? "vocab-list-button" :
+                "de_activate-button-non-editable-vocab"}
+            onClick={() => vocab.id &&
+                (props.calendarMode ? handleClickDeactivate(vocab.id) :
+                    handleClickActivate(vocab.id))}
+            onKeyDown={(e) => {
+                if (vocab.id && (e.key === 'Enter' || e.key === ' ')) {
+                    if (props.calendarMode) {
+                        handleClickDeactivate(vocab.id);
+                    } else {
+                        handleClickActivate(vocab.id);
+                    }
+                }
+            }}
+            aria-label={props.calendarMode ? `Deactivate ${vocab.word}` :
+                `Activate ${vocab.word}`}>
+            {props.calendarMode ? "deactivate" : "activate"}</button>
 
 
-                {vocab.createdBy === props.userId && vocab.id && <button
-                    className={"vocab-list-button"}
-                    onClick={() => handleClickDelete(vocab.id)}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key ===
-                            ' ') handleClickDelete(vocab.id);
-                    }}
-                    aria-label={`Delete ${vocab.word}`}
-                >
-                    delete
-                </button>}
-            </div>
-        </li>)}
-    </ul>)
+        {vocab.createdBy === props.userId && vocab.id && <button
+            className={"vocab-list-button"}
+            onClick={() => handleClickDelete(vocab.id)}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') handleClickDelete(
+                    vocab.id);
+            }}
+            aria-label={`Delete ${vocab.word}`}
+        >
+            delete
+        </button>}
+    </div>
+</li>)
+}
+</ul>)
 
 }
 

frontend/src/index.css

@@ -27,6 +27,10 @@ button {
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s;
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
 }
 
 .page {
@@ -45,10 +49,6 @@ button {
     padding: 1rem 0;
     width: 70%;
     font-size: 20px;
-    &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
 }
 
 .close-button {
@@ -57,6 +57,9 @@ button {
     cursor: pointer;
     padding: 0;
     margin: 0;
+    position: fixed;
+    top: 10px;
+    right: 15px;
 }
 
 .back-button {

frontend/src/pages/CalendarPage/CalendarPage.tsx

@@ -122,7 +122,6 @@ export default function CalendarPage(props: Readonly<Props>) {
                 vocabIdsOfWeek={vocabIdsOfWeek}
                 openDayPopUpAndPassItVocabs={openDayPopUpAndPassItVocabs}/>)}
         </article>
-        {/*// TODO overlay legt sich auch über das pop up selbst....*/}
         {vocabsOfDayPopUp.length > 0 && <div className={"overlay"}/>}
         {vocabsOfDayPopUp.length > 0 && <DayPopUp
             day={dayOfDayPopUp}

frontend/src/pages/DisplayPage/DisplayPage.css

@@ -0,0 +1,10 @@
+#display-page {
+    justify-content: space-evenly;
+    gap: 2.75vh;
+    font-size: 20px;
+}
+
+#display-page-text {
+    line-height: 28px;
+    margin: 10px 30px; padding: 0;
+}

frontend/src/pages/DisplayPage/DisplayPage.tsx

@@ -25,21 +25,20 @@ const [displayedVocab, setDisplayedVocab] = useState<Vocab>()
 
 if (!props.vocabs) return <p className={"loading-message"}>Loading...</p>
 
-
     function handleClick(){
-
         navigate("/")
         props.setDisplayNewVocabsPopUp(false)
 
     }
 
-    return (
-        <div id={"display-page"} className={"page"} role={"main"}>
-            <p>You've just activated this vocab. Take your time to memorize it:</p>
+    return (<div id={"display-page"} className={"page"} role={"main"}>
+            <div style={{height: "40px"}}/>
+            <p id={"display-page-text"}> Take your time to memorize
+                the new vocab:</p>
             <CardContainer displayedVocab={displayedVocab} displayWord={true}/>
-            <p>Finished? Click the button below to go back to the homepage</p>
             <button onClick={handleClick}
-                    aria-label={"Go back to the homepage"} className={"back-button"}>Go back to Home</button>
-        </div>
-    )
+                    aria-label={"Go back to the homepage"}
+                    className={"back-button"}>Go back to Home
+            </button>
+        </div>)
 }

frontend/src/pages/HomePage/HomePage.tsx

@@ -22,7 +22,6 @@ export default function HomePage(props: Readonly<Props>) {
     const navigate = useNavigate()
 
     return (<div id={"homepage"} className={"page"} role={"main"}>
-
         <article id={"homepage-text-and-button"}>
             {props.finishedReviewing && props.language &&
                 <p className={"homepage-text"}>You've got no vocabulary