Optimized styling

ProjektAdLer · May 2, 2024 · 19b88c1 · 19b88c1
1 parent c37e065
commit 19b88c1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 41 deletions.
diff --git a/Library/Pages/CreateStructuredLearningOutcome.razor b/Library/Pages/CreateStructuredLearningOutcome.razor
@@ -9,34 +9,41 @@
 @inject ISnackbar Snackbar
 @page "/"
 
-<div class="flex flex-row justify-between items-center gap-72 mb-3">
-    <div class="flex flex-row gap-1">
-        <p class="cursor-default text-lg ml-4">
-            @GetLocalizerString("CreateStructuredLearningOutcome.Title.Part1")<span class="cursor-default font-bold text-adlertextgrey">@GetLocalizerString("CreateStructuredLearningOutcome.Title.Part2")</span>
-        </p>
-        <MudTooltip Placement="Placement.Right" Class="cursor-default w-[650px] p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.Info.Text")">
-            <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="cursor-default text-adlergrey hover:text-adlerdarkblue"></MudIcon>
-        </MudTooltip>
+<div class="flex flex-col w-[98%] 2xl:w-4/6 mx-auto my-2 min-h-[98%] max-h-[98%] h-[98%] relative rounded border border-adlergrey-300 border-2 overflow-hidden bg-gradient-to-br from-adlerbggradientto to-adlergrey-100">
+    <div class="flex flex-col my-2 mx-4">
+        <div class="flex flex-row justify-between items-end">
+            <a href="https://projekt-adler.eu/" target="_blank" title="Website zum Projekt AdLer">
+                <img class="flex-none w-10" src="_content/Library/CustomIcons/AdLer_Logo.png" alt="Projekt AdLer-Logo"/>
+            </a>
+            <div class="flex">
+                <MudSelect T="CultureInfo" @bind-Value="@Culture" Class="pr-2" Style="width: 256px;" Dense="true">
+                    <MudSelectItem Value="@(new CultureInfo("de-DE"))">
+                        <div class="text-sm 2xl:text-base text-adlergrey">Deutsch/German</div>
+                    </MudSelectItem>
+                    <MudSelectItem Value="@(new CultureInfo("en-DE"))">
+                        <div class="text-sm 2xl:text-base text-adlergrey">Englisch/English</div>
+                    </MudSelectItem>
+                </MudSelect>
+            </div>
+        </div>
+        <MudText Class="cursor-default flex justify-center items-center text-lg 2xl:text-xl font-bold text-adlerdarkblue pb-1.5">@GetLocalizerString("CreateStructuredLearningOutcome.Title.Part1")</MudText>
+        <div class="flex flex-col gap-4">
+            <MudExpansionPanels Elevation="2">
+                <MudExpansionPanel Class="bg-gradient-to-br from-adlerbggradientto to-adlergrey-100" Text="@GetLocalizerString("CreateStructuredLearningOutcome.Title.Part2")">
+                    <MudText Class="cursor-default text-sm text-adlergrey-800">@GetLocalizerString("CreateStructuredLearningOutcome.Info.Text")"</MudText>
+                </MudExpansionPanel>
+            </MudExpansionPanels>
+        </div>
     </div>
-    <MudSelect T="CultureInfo" @bind-Value="@Culture" Class="pr-4">
-        <MudSelectItem Value="@(new CultureInfo("de-DE"))">
-            <div class="min-w-[15%] text-md break-keep text-adlergrey">Deutsch/German</div>
-        </MudSelectItem>
-        <MudSelectItem Value="@(new CultureInfo("en-DE"))">
-            <div class="min-w-[15%] text-md break-keep text-adlergrey">Englisch/English</div>
-        </MudSelectItem>
-    </MudSelect>
-</div>
-
-<div class="bg-adlerbgbright">
-    <MudForm @ref="_form" Class="flex flex-col border-3 border-adlerdarkblue rounded overflow-hidden px-4 py-2 border-t border-adlergrey-100">
+
+    <MudForm @ref="_form" Class="flex flex-col overflow-hidden px-4 py-2">
         <MudText Class="cursor-default text-sm 2xl:text-base text-adlertextgrey pt-2">@GetLocalizerString("CreateStructuredLearningOutcome.Text")</MudText>
 
         <div class="border-adlergrey-300 bg-white border-2 rounded py-2">
             <div class="flex flex-row gap-4 m-2 pb-8">
 
                 <div class="min-w-32 sm:w-44 2xl:w-48 flex flex-row items-center justify-center gap-2 p-2 bg-adlerblue-100 rounded">
-                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlertextgrey font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.TaxonomyLevel")</MudText>
+                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlerdarkblue font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.TaxonomyLevel")</MudText>
                     <MudTooltip Placement="Placement.Right" Class="w-96 p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.TaxonomyLevel.Info")">
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                     </MudTooltip>
@@ -105,7 +112,7 @@
                 <WhatContent>
                     <div class="flex flex-row gap-4 m-2">
                         <div class="min-w-32 sm:w-44 2xl:w-48 flex flex-row items-center justify-center gap-2 p-2 bg-adlergrey-100 rounded">
-                            <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlertextgrey font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.What")</MudText>
+                            <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlerdarkblue font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.What")</MudText>
                             <MudTooltip Placement="Placement.Right" Class="w-96 p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.What.Info")">
                                 <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                             </MudTooltip>
@@ -124,7 +131,7 @@
                 <VerbContent>
                     <div class="flex flex-row gap-4 m-2">
                         <div class="min-w-32 sm:w-44 2xl:w-48 flex flex-row items-center justify-center gap-2 p-2 bg-adlergrey-100 rounded">
-                            <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlertextgrey font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.VerbOfVisibility")</MudText>
+                            <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlerdarkblue font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.VerbOfVisibility")</MudText>
                             <MudTooltip Placement="Placement.Right" Class="w-96 p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.VerbOfVisibility.Info")">
                                 <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                             </MudTooltip>
@@ -146,7 +153,7 @@
 
             <div class="flex flex-row gap-4 m-2">
                 <div class="min-w-32 sm:w-44 2xl:w-48 flex flex-row items-center justify-center gap-2 p-2 bg-adlergrey-100 rounded">
-                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlertextgrey font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.Whereby")</MudText>
+                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlerdarkblue font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.Whereby")</MudText>
                     <MudTooltip Placement="Placement.Right" Class="w-96 p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.Whereby.Info")">
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                     </MudTooltip>
@@ -161,7 +168,7 @@
 
             <div class="flex flex-row gap-4 m-2">
                 <div class="min-w-32 sm:w-44 2xl:w-48 flex flex-row items-center justify-center gap-2 p-2 bg-adlergrey-100 rounded">
-                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlertextgrey font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.WhatFor")</MudText>
+                    <MudText Class="pt-1 cursor-default text-xs 2xl:text-sm text-adlerdarkblue font-bold break-all">@GetLocalizerString("CreateStructuredLearningOutcome.WhatFor")</MudText>
                     <MudTooltip Placement="Placement.Right" Class="w-96 p-4 bg-adlerdarkblue-200 shadow-xl text-start leading-relaxed" Text="@GetLocalizerString("CreateStructuredLearningOutcome.WhatFor.Info")">
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                     </MudTooltip>
@@ -185,24 +192,18 @@
     </div>
 
     <div class="flex flex-col gap-2 mx-4">
-        <MudText Class="cursor-default text-adlertextgrey text-sm font-bold">@GetLocalizerString("CreateStructuredLearningOutcome.Preview")</MudText>
+        <MudText Class="cursor-default text-adlerdarkblue text-sm font-bold">@GetLocalizerString("CreateStructuredLearningOutcome.Preview")</MudText>
         <div class="bg-white border border-adlergrey-300 border-2 rounded px-4 p-5">
             @GetMarkDownFormattedOutcome()
         </div>
     </div>
-
-    <MudButton Class="text-adlerblue font-bold flex-auto justify-start" Disabled="!LearningOutcomeIsCopyable()" StartIcon="@Icons.Material.Filled.ContentCopy" OnClick="@CopyToClickBoard">In die Zwischenablage kopieren</MudButton>
-
-    <div class="flex flex-row justify-between">
 
+    <div class="flex flex-row justify-between px-4 py-2">
+        <MudButton Class="text-adlerblue font-bold flex justify-end" Disabled="!LearningOutcomeIsCopyable()" StartIcon="@Icons.Material.Filled.ContentCopy" OnClick="@CopyToClickBoard">@GetLocalizerString("CreateStructuredLearningOutcome.Copy")</MudButton>
         <div class="flex items-end">
-            <button class="h-8 m-2 hover:bg-adlergrey-100 hover:rounded">
-                <a class="mx-2 text-xs text-adlergrey-300" target="_blank" href="@GetLocalizerString("CreateStructuredLearningOutcome.ExampleImagePath")">@GetLocalizerString("CreateStructuredLearningOutcome.Example")</a>
-            </button>
-
+            <a class="mx-2 text-xs text-adlerblue" target="_blank" href="@GetLocalizerString("CreateStructuredLearningOutcome.ExampleImagePath")">@GetLocalizerString("CreateStructuredLearningOutcome.Example")</a>
         </div>
     </div>
-
 </div>
 
 @code {

diff --git a/Library/Resources/Pages/CreateStructuredLearningOutcome.de.resx b/Library/Resources/Pages/CreateStructuredLearningOutcome.de.resx
@@ -19,10 +19,10 @@
         <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
     </resheader>
     <data name="CreateStructuredLearningOutcome.Title.Part1" xml:space="preserve">
-        <value>Lernziel-Formulierung: </value>
+        <value>AdLer-Eingabeunterstützung</value>
     </data>
     <data name="CreateStructuredLearningOutcome.Title.Part2" xml:space="preserve">
-        <value>Eingabeunterstützung</value>
+        <value>Was sind Lernziele/Lernergebnisse?</value>
     </data>
     <data name="CreateStructuredLearningOutcome.Info.Text" xml:space="preserve">
         <value>Im Zusammenhang mit der kompetenzorientierten Hochschullehre und dem damit verbundenen Perspektivwechsel „Shift from Teaching to Learning“, wurden auch Lernziele in den Fokus gerückt. Lernziele beschreiben, was Studierende am Ende eines Lernabschnitts wissen und können sollen sowie welche Einstellungen von ihnen erwartet werden. Lernziele sind damit die möglichst exakte Beschreibung der angestrebten Lernergebnisse (engl. Learning Outcomes). Sie werden in schriftlicher Form festgehalten und situationsgerecht kommuniziert. Hilfestellungen dafür sind die Was-Womit-Wozu-Struktur und Lernzieltaxonomien (z.B. nach Anderson/Krathwohl), welche auf Basis von verschiedenen Kompetenzstufen passende Verben für die Formulierung von Lernzielen vorschlagen.</value>
@@ -127,12 +127,15 @@
         <value>Aktualisieren</value>
     </data>
     <data name="CreateStructuredLearningOutcome.CopyToClipboard.Success" xml:space="preserve">
-        <value>Ihr formuliertes Lernziel/Lernergebnis wurde erfolgreich in die Zwischenablage kopiert.</value>
+        <value>Ihr formuliertes Lernziel wurde erfolgreich in die Zwischenablage kopiert.</value>
     </data>
     <data name="CreateStructuredLearningOutcome.CopyToClipboard.Failure" xml:space="preserve">
         <value>Fehler beim Kopieren in die Zwischenablage. Markieren und kopieren Sie alternativ Ihr formuliertes Lernziel/Lernergebnis im Vorschaufenster.</value>
     </data>
     <data name="CreateStructuredLearningOutcome.ExampleImagePath" xml:space="preserve">
         <value>/CustomIcons/Beispiel-Lernziel_AT-de_LO-de.png</value>
     </data>
+    <data name="CreateStructuredLearningOutcome.Copy" xml:space="preserve">
+        <value>In die Zwischenablage kopieren</value>
+    </data>
 </root>
diff --git a/Library/Resources/Pages/CreateStructuredLearningOutcome.en.resx b/Library/Resources/Pages/CreateStructuredLearningOutcome.en.resx
@@ -19,10 +19,10 @@
         <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
     </resheader>
     <data name="CreateStructuredLearningOutcome.Title.Part1" xml:space="preserve">
-        <value>Learning outcome formulation: </value>
+        <value>AdLer input support</value>
     </data>
     <data name="CreateStructuredLearningOutcome.Title.Part2" xml:space="preserve">
-        <value>Input support</value>
+        <value>What are learning objectives/learning outcomes?</value>
     </data>
     <data name="CreateStructuredLearningOutcome.Info.Text" xml:space="preserve">
         <value>In the context of competency-based higher education and the associated shift in perspective from "teaching to learning", learning objectives have also come into focus. Learning objectives are also the most precise description of the desired learning outcomes. Learning outcomes describe what students should know and be able to do at the end of a learning section and what attitudes are expected of them. They are recorded in writing and communicated in a situational manner. The what-whereby-what-for-structure and taxonomy of learning objectives (e.g. according to Anderson/Krathwohl) are helpful in this context, to select appropriate verbs for formulating learning outcomes on the basis of different levels of competence.</value>
@@ -127,12 +127,15 @@
         <value>Update</value>
     </data>
     <data name="CreateStructuredLearningOutcome.CopyToClipboard.Success" xml:space="preserve">
-        <value>Your formulated learning objective/learning outcome has been successfully copied to the clipboard.</value>
+        <value>Your formulated learning objective has been successfully copied to the clipboard.</value>
     </data>
     <data name="CreateStructuredLearningOutcome.CopyToClipboard.Failure" xml:space="preserve">
         <value>Error when copying to the clipboard. Alternatively, select and copy your formulated learning objective/learning outcome in the preview window.</value>
     </data>
     <data name="CreateStructuredLearningOutcome.ExampleImagePath" xml:space="preserve">
         <value>/CustomIcons/Beispiel-Lernziel_AT-en_LO-en.png</value>
     </data>
+    <data name="CreateStructuredLearningOutcome.Copy" xml:space="preserve">
+        <value>Copy to clipboard</value>
+    </data>
 </root>