Feat

- Content layout
Wedyarit · Jul 30, 2022 · 5dec5eb · 5dec5eb
1 parent ee3d4fc
commit 5dec5eb
Show file tree

Hide file tree

Showing 10 changed files with 246 additions and 80 deletions.
diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@ <h2 class="app__title">
             Questions list
         </h2>
         <div class="app__wrapper">
-            <div class="list-item">
+            <div class="list-item action action--default">
                 <p class="list-item__name">
                     What's 2 + 2?
                 </p>
@@ -23,7 +23,7 @@ <h2 class="app__title">
                     </g>
                 </svg>
             </div>
-            <div class="list-item">
+            <div class="list-item action action--default">
                 <p class="list-item__name">
                     What's 2 + 2?
                 </p>
@@ -36,7 +36,7 @@ <h2 class="app__title">
                 </svg>
             </div>
 
-            <div class="list-item">
+            <div class="list-item list-item--action action action--positive">
                 <p class="list-item__name">
                     New question
                 </p>
@@ -50,57 +50,94 @@ <h2 class="app__title">
         </div>
     </section>
     <section class="app__box question">
-        <h2 class="app__title">
-            Question
-        </h2>
-        <div class="app__wrapper">
-            <input class="question__title" type="text" placeholder="Type question title">
-            <div class="question__option option">
-                <input class="option__text" type="text" placeholder="Type question option">
-                <div class="option__remove">
-                    <div class="option__icon"></div>
+        <div class="app__header">
+            <h2 class="app__title">
+                Question
+            </h2>
+            <div class="app__wrapper">
+                <input class="question__title" type="text" placeholder="Type question title">
+                <div class="question__option option">
+                    <input class="option__text" type="text" placeholder="Type question option">
+                    <div class="option__remove action action--negative">
+                        <div class="option__icon"></div>
+                    </div>
                 </div>
-            </div>
-            <div class="question__option option">
-                <input class="option__text" type="text" placeholder="Type question option">
-                <div class="option__remove">
-                    <div class="option__icon"></div>
+                <div class="question__option option">
+                    <input class="option__text" type="text" placeholder="Type question option">
+                    <div class="option__remove action action--negative">
+                        <div class="option__icon"></div>
+                    </div>
                 </div>
-            </div>
-            <div class="question__option option">
-                <input class="option__text" type="text" placeholder="Type question option">
-                <div class="option__remove">
-                    <div class="option__icon"></div>
+                <div class="question__option option">
+                    <input class="option__text" type="text" placeholder="Type question option">
+                    <div class="option__remove action action--negative">
+                        <div class="option__icon"></div>
+                    </div>
                 </div>
-            </div>
 
-            <div class="question__new-option">
-                <p>+ New Option +</p>
+                <div class="question__option option option--action action action--positive">
+                    <p>+ New Option +</p>
+                </div>
             </div>
         </div>
-    </section>
-    <section class="app__box question-type">
-        <h2 class="app__title">
-            Question type
-        </h2>
-        <div class="question-type__types">
-            <div class="question-type__item">
-                <p>Multiple Choice</p>
+        <div class="app__footer">
+            <div class="question__buttons">
+                <div class="question__button action action--default">
+                    <p>Preview</p>
+                </div>
+                <div class="question__button action action--positive">
+                    <p>Save</p>
+                </div>
             </div>
-            <div class="question-type__item">
-                <p>Single Choice</p>
+        </div>
+    </section>
+    <section class="app__box right-box">
+        <div class="question-type">
+            <h2 class="app__title">
+                Question type
+            </h2>
+            <div class="question-type__types">
+                <div class="question-type__item action action--default">
+                    <p>Multiple Choice</p>
+                </div>
+                <div class="question-type__item action action--default">
+                    <p>Single Choice</p>
+                </div>
+                <div class="question-type__item action action--default">
+                    <p>Open Choice</p>
+                </div>
+                <div class="question-type__item action action--default">
+                    <p>True / False</p>
+                </div>
             </div>
-            <div class="question-type__item">
-                <p>Open Choice</p>
+        </div>
+        <div class="question-theme">
+            <h2 class="app__title">
+                Themes
+            </h2>
+            <div class="question-theme__themes">
+                <div class="question-theme__item">
+
+                </div>
+                <div class="question-theme__item">
+
+                </div>
+                <div class="question-theme__item">
+
+                </div>
+                <div class="question-theme__item">
+
+                </div>
             </div>
-            <div class="question-type__item">
-                <p>True / False</p>
+            <div class="question-theme__buttons">
+                <div class="question-theme__button action action--default">
+                    <p>More themes</p>
+                </div>
+                <div class="question-theme__button action action--default">
+                    <p>From image</p>
+                </div>
             </div>
         </div>
-
-        <h2 class="app__title">
-            Themes
-        </h2>
     </section>
 </div>
 </body>

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -1,2 +1,3 @@
 import './stylesheets/index.scss';
-import './stylesheets/nullstyle.css';
+import './stylesheets/_nullstyle.css';
+import './stylesheets/_shared.scss';
diff --git a/src/scripts/structs/question-option.struct.ts b/src/scripts/structs/question-option.struct.ts
@@ -0,0 +1,4 @@
+class QuestionOption {
+    text: string;
+    isCorrect: boolean;
+}
diff --git a/src/scripts/structs/question-type.enum.ts b/src/scripts/structs/question-type.enum.ts
@@ -0,0 +1,6 @@
+enum QuestionType {
+    SINGLE_CHOICE,
+    MULTIPLE_CHOICE,
+    OPEN_CHOICE,
+    TRU_FALSE_CHOICE
+}
diff --git a/src/scripts/structs/question.struct.ts b/src/scripts/structs/question.struct.ts
@@ -0,0 +1,5 @@
+class Question {
+    title: string;
+    type: QuestionType;
+    options: QuestionOption[];
+}
diff --git a/src/scripts/structs/questionnaire-theme.struct.ts b/src/scripts/structs/questionnaire-theme.struct.ts
@@ -0,0 +1,3 @@
+class QuestionnaireTheme {
+
+}
diff --git a/src/scripts/structs/questionnaire.struct.ts b/src/scripts/structs/questionnaire.struct.ts
@@ -0,0 +1,4 @@
+class QuestionnaireStruct {
+    theme: QuestionnaireTheme;
+    questions: Question[];
+}
diff --git a/src/stylesheets/nullstyle.css → src/stylesheets/_nullstyle.css b/src/stylesheets/nullstyle.css → src/stylesheets/_nullstyle.css
diff --git a/src/stylesheets/_shared.scss b/src/stylesheets/_shared.scss
@@ -0,0 +1,6 @@
+$background: #E7E7E7;
+$box: #EDEBEB;
+
+$default: #000;
+$positive: #42FF00;
+$negative: #FF0000;