Styling for notes-popup

StudentsAgainstCovid19 · Jun 26, 2020 · 81e6b09 · 81e6b09
1 parent c9e4251
commit 81e6b09
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 22 deletions.
diff --git a/src/css/detailed_view.css b/src/css/detailed_view.css
@@ -465,4 +465,29 @@ input[type="checkbox"] {
 
 .bold_text {
     font-weight: bold;
+}
+
+#notesDiv{
+    margin: 0.5em;
+    display:flex;
+    flex-direction: column;
+    justify-content: start;
+    align-content: center;
+    margin-bottom: 2em;
+}
+
+#notesHeaderDiv{
+    display: flex;
+    justify-content: start;
+    align-content: center;
+    flex-direction: row;
+}
+
+#notesHeaderText{
+    position: relative;
+    top: 10px;
+}
+
+#notes_area{
+    width: 70%;
 }
diff --git a/src/css/popup_style.css b/src/css/popup_style.css
@@ -129,4 +129,40 @@
     z-index: 8;
     width: 100%;
     height: 100%;
-}
+}
+
+
+#notesHistoryDiv{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-content: end;
+    margin:1em;
+    border: solid black 3px;
+    border-radius: 10px;
+    height: auto;
+    max-height: 70%;
+    overflow: auto;
+}
+
+#notesItem{
+    display:flex;
+    justify-content: start;
+    align-content: center;
+    flex-direction: row;
+}
+
+#notesText{
+    font-weight: 300;
+}
+
+#hideNotesButton{
+    width: 30%;
+}
+
+#hideNotesButtonDiv{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+}
diff --git a/src/xslt_scripts/xslt_detailed_view.xsl b/src/xslt_scripts/xslt_detailed_view.xsl
@@ -331,21 +331,23 @@
                 </input>
             </p>
         </div>
-        <p class="text">Weitere Hinweise:</p>
-        <div>
+        <div id="notesDiv">
+            <div id="notesHeaderDiv">
+                <p id="notesHeaderText" class="text">Weitere Hinweise:</p>
+                <button  class="dialogButton btn-gray">
+                    <xsl:choose>
+                        <xsl:when test="count(/InfectedDto/historyItems/historyItem[(notes != '')]) > 0">
+                            <xsl:attribute name="onclick">showNotes();</xsl:attribute>
+                            Notizen anzeigen
+                        </xsl:when>
+                        <xsl:otherwise>
+                            <xsl:attribute name="disabled"/>
+                            Keine Notizen vorhanden
+                        </xsl:otherwise>
+                    </xsl:choose>
+                </button>
+            </div>
             <textarea id="notes_area" class="notes_field" rows="10" cols="30" maxlength="100"/>
-            <button class="dialogButton btn-gray">
-                <xsl:choose>
-                    <xsl:when test="count(/InfectedDto/historyItems/historyItem[(notes = '')]) > 0">
-                        <xsl:attribute name="onclick">showNotes();</xsl:attribute>
-                        Notizen anzeigen
-                    </xsl:when>
-                    <xsl:otherwise>
-                        <xsl:attribute name="disabled"/>
-                        Keine Notizen vorhanden
-                    </xsl:otherwise>
-                </xsl:choose>
-            </button>
         </div>
 
 

diff --git a/src/xslt_scripts/xslt_notes_popup.xsl b/src/xslt_scripts/xslt_notes_popup.xsl
@@ -8,16 +8,14 @@
         <div id="notesHistoryDiv" class="notesDiv">
             <xsl:apply-templates select="historyItems/historyItem[not(notes = '')]"/>
         </div>
-        <button onclick="hidePopUp();" class="dialogButton cancel_button">Schließen</button>
+        <div id="hideNotesButtonDiv">
+        <button id="hideNotesButton" onclick="hidePopUp();" class="dialogButton cancel_button">Schließen</button>
+        </div>
     </xsl:template>
 
     <xsl:template match="historyItem">
-        <div>
-            <p>Vom <xsl:value-of select="timestamp"/>:</p>
-            <textarea class="notes_field">
-                <xsl:attribute name="readonly"/>
-                <xsl:value-of select="notes"/>
-            </textarea>
+        <div id="notesItem">
+            <p class="bold_text">Vom <xsl:value-of select="timestamp"/>: <span id="notesText"><xsl:value-of select="notes"/></span></p>
         </div>
     </xsl:template>
 </xsl:stylesheet>