Merge pull request #75 from 1Cezzo/css-design

Css design

src/components/CategoryQuizzes.vue

@@ -11,9 +11,11 @@
           <button @click="addTag" :disabled="!currentTag" class="add-tag-button">Add Tag</button>
         </div>
         <div class="sort-select-container">
+          <p>Sort by:</p>
+
           <select v-model="selectedSort" @change="changeSort">
             <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-              {{ option.text }} ▼
+              {{ option.text }}
             </option>
           </select>
         </div>
@@ -90,8 +92,6 @@ const selectedSort = ref('creationDate,desc') // Default sort option
 const sortOptions = [
   { value: 'creationDate,desc', text: 'Newest Creation Date' },
   { value: 'creationDate,asc', text: 'Oldest Creation Date' },
-  //{ value: 'lastModifiedDate,desc', text: 'Newest Modified Date' },
-  //{ value: 'lastModifiedDate,asc', text: 'Oldest Modified Date' },
   { value: 'title,asc', text: 'Title (A-Z)' },
   { value: 'title,desc', text: 'Title (Z-A)' },
   { value: 'isPublic,desc', text: 'Public Quizzes' },
@@ -335,32 +335,6 @@ const searchQuizzes = async () => {
   user-select: none;
 }
 
-.pagination-controls button:hover:not(:disabled) {
-  background-color: #f0f0f0;
-}
-
-.pagination-controls button.current-page,
-.pagination-controls button:disabled {
-  background-color: black;
-  color: white;
-  pointer-events: none;
-}
-
-.pagination-controls span {
-  user-select: none;
-}
-
-.pagination-controls .pagination-ellipsis {
-  text-align: center;
-  padding: 8px 16px;
-  margin: 0 5px;
-  display: inline-block;
-  min-width: 36px;
-}
-
-.pagination-controls .pagination-ellipsis {
-  cursor: default;
-}
 .quizCard {
   cursor: pointer;
 }

src/components/CreateQuiz.vue

@@ -408,6 +408,7 @@ h3 {
   margin-top: 20px;
 }
 .description {
+  font-family: inherit;
   height: 100px;
   resize: none;
 }

src/components/EditQuiz.vue

@@ -141,6 +141,9 @@
       </button>
       <ImportButton :quizId="quizId" />
       <ExportButton :quizId="quizId" />
+      <button @click="redirectToHelp" class="additional-button collaborate-button">
+        Help
+      </button>
     </div>
     <CollaborateModal v-if="showModal" @close="hideCollaborateModal" :quizId="quizId" />
   </div>
@@ -428,6 +431,10 @@ const showPopup = (message: string, color: string) => {
   popupMessage.value = { message, color }
   isVisible.value = true
 }
+
+const redirectToHelp = () => {
+  window.open('https://github.com/1Cezzo/idatt2105-project-backend/wiki/Import-format');
+}
 </script>
 
 <style scoped>
@@ -510,6 +517,7 @@ h3 {
 }
 
 .input-field {
+  font-family: inherit;
   width: 100%;
   padding: 10px;
   margin-bottom: 10px;
@@ -527,14 +535,18 @@ h3 {
 }
 
 .additional-buttons {
-  grid-column: 3;
+  flex-direction: row;
+  grid-column: 4;
   display: flex;
   flex-direction: column;
   justify-content: start;
+  margin-right: 10px;
 }
 
 .additional-buttons button {
   margin-bottom: 10px;
+  padding: 10px;
+  margin-left: 10px;
 }
 
 .submit-button,
@@ -697,9 +709,9 @@ form {
 .question-title {
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2; /* Limit to two lines */
+  -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical;
-  white-space: normal; /* Ensures text wraps within the limited lines */
+  white-space: normal; 
   padding: 5px;
 }
 
@@ -749,16 +761,13 @@ form {
   width: 40%;
 }
 select {
+  padding: 12px;
+  border-radius: 4px;
   appearance: none;
-  border: 0;
-  outline: 0;
-  font: inherit;
-  width: 15rem;
-  padding: 1rem 4rem 1rem 1rem;
-  color: black;
-  border-radius: 0.5em;
+  position: relative;
+  font-size: 16px;
   cursor: pointer;
-  transition: box-shadow 0.3s;
+  user-select: none;
 
   &::-ms-expand {
     display: none;

src/components/ExportButton.vue

@@ -99,7 +99,7 @@ function clearPopup() {
   background-color: black;
   color: white;
   cursor: pointer;
-  margin-top: 10px;
+  margin-top: 10px 0;
   transition:
     background-color 0.3s,
     box-shadow 0.3s;
@@ -115,10 +115,4 @@ function clearPopup() {
   align-self: flex-end;
   max-width: fit-content;
 }
-@media (max-width: 1100px) {
-  .additional-button{
-    margin-bottom: 10px;
-    margin-left: 10px;
-  }
-}
 </style>

src/components/ImportButton.vue

@@ -74,6 +74,7 @@ const clearPopup = () => {
   background-color: black;
   color: white;
   cursor: pointer;
+  margin: 10px 0;
   transition:
     background-color 0.3s,
     box-shadow 0.3s;