Fork of Fuse angular template

donner le fichier css du component question-list.component.ts

246d ago

Here's the CSS file for the question-list.component.ts:

.container {
  padding: 30px 15px;
  
  h2 {
    color: #3f51b5;
    margin-bottom: 0;
    font-weight: 500;
  }
  
  .text-right {
    text-align: right;
  }
  
  .btn-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    
    &:hover {
      background-color: #303f9f;
      border-color: #303f9f;
    }
    
    i {
      margin-right: 8px;
    }
  }
  
  .card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    
    .card-header {
      padding: 15px 20px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      
      h5 {
        margin: 0;
        font-weight: 500;
        color: #3f51b5;
      }
    }
    
    .card-body {
      padding: 20px;
    }
  }
  
  .form-group {
    margin-bottom: 15px;
    
    label {
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
      color: #555;
    }
    
    .form-control {
      height: 40px;
      border-radius: 4px;
      border: 1px solid #ced4da;
      
      &:focus {
        border-color: #3f51b5;
        box-shadow: 0 0 0 0.2rem rgba(63, 81, 181, 0.25);
      }
    }
  }
  
  .table {
    margin-bottom: 0;
    
    th {
      font-weight: 500;
      color: #555;
      border-top: none;
    }
    
    td {
      vertical-align: middle;
    }
  }
  
  .badge {
    padding: 5px 10px;
    font-weight: 500;
    border-radius: 4px;
  }
  
  .badge-success {
    background-color: #4caf50;
  }
  
  .badge-warning {
    background-color: #ff9800;
  }
  
  .badge-danger {
    background-color: #f44336;
  }
  
  .badge-secondary {
    background-color: #757575;
  }
  
  .btn-group {
    .btn {
      padding: 5px 10px;
      margin-right: 5px;
      
      &:last-child {
        margin-right: 0;
      }
      
      i {
        font-size: 14px;
      }
    }
    
    .btn-primary {
      background-color: #3f51b5;
      border-color: #3f51b5;
      
      &:hover {
        background-color: #303f9f;
        border-color: #303f9f;
      }
    }
    
    .btn-danger {
      background-color: #f44336;
      border-color: #f44336;
      
      &:hover {
        background-color: #d32f2f;
        border-color: #d32f2f;
      }
    }
  }
  
  .alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-color: #bbdefb;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
  }
  
  .table-responsive {
    overflow-x: auto;
  }
  
  @media (max-width: 768px) {
    .text-right {
      text-align: left;
      margin-top: 15px;
    }
    
    .row {
      margin-bottom: 0;
      
      .col-md-4 {
        margin-bottom: 15px;
      }
    }
    
    .btn-group .btn {
      padding: 4px 8px;
      
      i {
        font-size: 12px;
      }
    }
  }
}

This SCSS file provides styling for the question list component, including:

Container padding and layout
Heading styles with the primary color
Card styling for the filters section and question list
Form control styling for the filter dropdowns
Table styling for the question list
Badge styling for different question levels and types
Button group styling for the action buttons
Alert styling for when no questions are found
Responsive adjustments for smaller screens

The styles follow the same design patterns as the other components in your project, maintaining consistency throughout the application.

246d ago

donner le fichier css du component candidate-list.component.ts

246d ago

Here's the CSS file for the candidate-list.component.ts:

.container {
  padding: 30px 15px;
  
  h2 {
    color: #3f51b5;
    margin-bottom: 0;
    font-weight: 500;
  }
  
  .text-right {
    text-align: right;
  }
  
  .btn-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    
    &:hover {
      background-color: #303f9f;
      border-color: #303f9f;
    }
    
    i {
      margin-right: 8px;
    }
  }
  
  .card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    
    .card-body {
      padding: 20px;
    }
  }
  
  .table {
    margin-bottom: 0;
    
    th {
      font-weight: 500;
      color: #555;
      border-top: none;
    }
    
    td {
      vertical-align: middle;
    }
  }
  
  .btn-group {
    .btn {
      padding: 5px 10px;
      margin-right: 5px;
      
      &:last-child {
        margin-right: 0;
      }
      
      i {
        font-size: 14px;
      }
    }
    
    .btn-info {
      background-color: #2196f3;
      border-color: #2196f3;
      
      &:hover {
        background-color: #1976d2;
        border-color: #1976d2;
      }
    }
    
    .btn-primary {
      background-color: #3f51b5;
      border-color: #3f51b5;
      
      &:hover {
        background-color: #303f9f;
        border-color: #303f9f;
      }
    }
    
    .btn-danger {
      background-color: #f44336;
      border-color: #f44336;
      
      &:hover {
        background-color: #d32f2f;
        border-color: #d32f2f;
      }
    }
  }
  
  .alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-color: #bbdefb;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
  }
  
  .table-responsive {
    overflow-x: auto;
  }
  
  @media (max-width: 768px) {
    .text-right {
      text-align: left;
      margin-top: 15px;
    }
    
    .row {
      margin-bottom: 0;
    }
    
    .btn-group .btn {
      padding: 4px 8px;
      
      i {
        font-size: 12px;
      }
    }
    
    .table th, 
    .table td {
      padding: 10px 8px;
    }
  }
}

This SCSS file provides styling for the candidate list component, including:

Container padding and layout
Heading styles with the primary color
Card styling for the candidate list
Table styling for displaying candidate information
Button group styling for the action buttons (view, edit, delete)
Alert styling for when no candidates are found
Responsive adjustments for smaller screens

The styles maintain consistency with the other components in your project, ensuring a unified look and feel throughout the application.

246d ago

donner une autre version du fichier css du dashboard admin

246d ago

package.json

donner le fichier css du component question-list.component.ts

246d ago

Here's the CSS file for the question-list.component.ts:

.container {
  padding: 30px 15px;
  
  h2 {
    color: #3f51b5;
    margin-bottom: 0;
    font-weight: 500;
  }
  
  .text-right {
    text-align: right;
  }
  
  .btn-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    
    &:hover {
      background-color: #303f9f;
      border-color: #303f9f;
    }
    
    i {
      margin-right: 8px;
    }
  }
  
  .card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    
    .card-header {
      padding: 15px 20px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      
      h5 {
        margin: 0;
        font-weight: 500;
        color: #3f51b5;
      }
    }
    
    .card-body {
      padding: 20px;
    }
  }
  
  .form-group {
    margin-bottom: 15px;
    
    label {
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
      color: #555;
    }
    
    .form-control {
      height: 40px;
      border-radius: 4px;
      border: 1px solid #ced4da;
      
      &:focus {
        border-color: #3f51b5;
        box-shadow: 0 0 0 0.2rem rgba(63, 81, 181, 0.25);
      }
    }
  }
  
  .table {
    margin-bottom: 0;
    
    th {
      font-weight: 500;
      color: #555;
      border-top: none;
    }
    
    td {
      vertical-align: middle;
    }
  }
  
  .badge {
    padding: 5px 10px;
    font-weight: 500;
    border-radius: 4px;
  }
  
  .badge-success {
    background-color: #4caf50;
  }
  
  .badge-warning {
    background-color: #ff9800;
  }
  
  .badge-danger {
    background-color: #f44336;
  }
  
  .badge-secondary {
    background-color: #757575;
  }
  
  .btn-group {
    .btn {
      padding: 5px 10px;
      margin-right: 5px;
      
      &:last-child {
        margin-right: 0;
      }
      
      i {
        font-size: 14px;
      }
    }
    
    .btn-primary {
      background-color: #3f51b5;
      border-color: #3f51b5;
      
      &:hover {
        background-color: #303f9f;
        border-color: #303f9f;
      }
    }
    
    .btn-danger {
      background-color: #f44336;
      border-color: #f44336;
      
      &:hover {
        background-color: #d32f2f;
        border-color: #d32f2f;
      }
    }
  }
  
  .alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-color: #bbdefb;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
  }
  
  .table-responsive {
    overflow-x: auto;
  }
  
  @media (max-width: 768px) {
    .text-right {
      text-align: left;
      margin-top: 15px;
    }
    
    .row {
      margin-bottom: 0;
      
      .col-md-4 {
        margin-bottom: 15px;
      }
    }
    
    .btn-group .btn {
      padding: 4px 8px;
      
      i {
        font-size: 12px;
      }
    }
  }
}

This SCSS file provides styling for the question list component, including:

Container padding and layout
Heading styles with the primary color
Card styling for the filters section and question list
Form control styling for the filter dropdowns
Table styling for the question list
Badge styling for different question levels and types
Button group styling for the action buttons
Alert styling for when no questions are found
Responsive adjustments for smaller screens

The styles follow the same design patterns as the other components in your project, maintaining consistency throughout the application.

donner le fichier css du component candidate-list.component.ts

246d ago

Here's the CSS file for the candidate-list.component.ts:

.container {
  padding: 30px 15px;
  
  h2 {
    color: #3f51b5;
    margin-bottom: 0;
    font-weight: 500;
  }
  
  .text-right {
    text-align: right;
  }
  
  .btn-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    
    &:hover {
      background-color: #303f9f;
      border-color: #303f9f;
    }
    
    i {
      margin-right: 8px;
    }
  }
  
  .card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    
    .card-body {
      padding: 20px;
    }
  }
  
  .table {
    margin-bottom: 0;
    
    th {
      font-weight: 500;
      color: #555;
      border-top: none;
    }
    
    td {
      vertical-align: middle;
    }
  }
  
  .btn-group {
    .btn {
      padding: 5px 10px;
      margin-right: 5px;
      
      &:last-child {
        margin-right: 0;
      }
      
      i {
        font-size: 14px;
      }
    }
    
    .btn-info {
      background-color: #2196f3;
      border-color: #2196f3;
      
      &:hover {
        background-color: #1976d2;
        border-color: #1976d2;
      }
    }
    
    .btn-primary {
      background-color: #3f51b5;
      border-color: #3f51b5;
      
      &:hover {
        background-color: #303f9f;
        border-color: #303f9f;
      }
    }
    
    .btn-danger {
      background-color: #f44336;
      border-color: #f44336;
      
      &:hover {
        background-color: #d32f2f;
        border-color: #d32f2f;
      }
    }
  }
  
  .alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-color: #bbdefb;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
  }
  
  .table-responsive {
    overflow-x: auto;
  }
  
  @media (max-width: 768px) {
    .text-right {
      text-align: left;
      margin-top: 15px;
    }
    
    .row {
      margin-bottom: 0;
    }
    
    .btn-group .btn {
      padding: 4px 8px;
      
      i {
        font-size: 12px;
      }
    }
    
    .table th, 
    .table td {
      padding: 10px 8px;
    }
  }
}

This SCSS file provides styling for the candidate list component, including:

Container padding and layout
Heading styles with the primary color
Card styling for the candidate list
Table styling for displaying candidate information
Button group styling for the action buttons (view, edit, delete)
Alert styling for when no candidates are found
Responsive adjustments for smaller screens

The styles maintain consistency with the other components in your project, ensuring a unified look and feel throughout the application.

246d ago

donner une autre version du fichier css du dashboard admin

246d ago

candidate-form.component.html

candidate-form.component.ts

candidate-list.component.html

candidate-list.component.ts

category-form.component.html

category-form.component.ts

category-list.component.html

category-list.component.scss

category-list.component.ts

dashboard.component.html

dashboard.component.scss

dashboard.component.ts

question-form.component.html

question-form.component.scss

question-form.component.ts

question-list.component.html

question-list.component.ts

subcategory-form.component.html

subcategory-form.component.ts

subcategory-list.component.html

subcategory-list.component.ts

test-form.component.html

test-form.component.scss

test-form.component.ts

test-list.component.html

test-list.component.ts

reset-password.component.html

reset-password.component.scss

reset-password.component.ts

dashboard.component.html

dashboard.component.scss

dashboard.component.ts

profile.component.html

profile.component.scss

profile.component.ts

test-results.component.html

test-results.component.scss

test-results.component.ts

test-taking.component.html

test-taking.component.scss

test-taking.component.ts

category-view.component.css

category-view.component.html

category-view.component.ts

confirm-dialog.component.css

confirm-dialog.component.html

confirm-dialog.component.ts

footer.component.html

footer.component.scss

header.component.html

header.component.scss

subcategory-form.component.css

subcategory-form.component.html

subcategory-form.component.ts

error.interceptor.ts

must-match.validator.ts

candidate.service.ts

subcategory.service.ts

test-candidate.service.ts

app-routing.module.ts

candidate-form.component.html

candidate-form.component.ts

candidate-list.component.html

candidate-list.component.ts

category-form.component.html

category-form.component.ts

category-list.component.html

category-list.component.scss

category-list.component.ts

dashboard.component.html

dashboard.component.scss

dashboard.component.ts

question-form.component.html

question-form.component.scss

question-form.component.ts

question-list.component.html

question-list.component.ts

subcategory-form.component.html

subcategory-form.component.ts

subcategory-list.component.html

subcategory-list.component.ts

test-form.component.html

test-form.component.scss

test-form.component.ts

test-list.component.html

test-list.component.ts

reset-password.component.html

reset-password.component.scss

reset-password.component.ts

dashboard.component.html

dashboard.component.scss

dashboard.component.ts

profile.component.html

profile.component.scss

profile.component.ts

test-results.component.html

test-results.component.scss

test-results.component.ts

test-taking.component.html

test-taking.component.scss

test-taking.component.ts

category-view.component.css

category-view.component.html

category-view.component.ts

confirm-dialog.component.css

confirm-dialog.component.html

confirm-dialog.component.ts

footer.component.html

footer.component.scss

header.component.html

header.component.scss

subcategory-form.component.css

subcategory-form.component.html

subcategory-form.component.ts

error.interceptor.ts

must-match.validator.ts

candidate.service.ts

subcategory.service.ts

test-candidate.service.ts

app-routing.module.ts