Refactors design system documentation and layout
Updates design system documentation with comprehensive component overview Enhances UI layout across multiple pages with consistent styling and new components Adds support for charts, pagination, and responsive design elements Improves overall system documentation and visual consistency
This commit is contained in:
parent
35b15294e3
commit
fac7754d7a
14 changed files with 3492 additions and 281 deletions
|
|
@ -123,7 +123,7 @@
|
|||
<swp-page-header>
|
||||
<swp-page-title>
|
||||
<h1>Abonnement & Konto</h1>
|
||||
<p>Administrer dit abonnement, brugere og betalingsinfo</p>
|
||||
<p>Administrer dit abonnement og betalingsinfo</p>
|
||||
</swp-page-title>
|
||||
</swp-page-header>
|
||||
|
||||
|
|
@ -261,208 +261,6 @@
|
|||
</swp-plan-grid>
|
||||
</swp-section>
|
||||
|
||||
<!-- ==========================================
|
||||
USERS SECTION
|
||||
========================================== -->
|
||||
<swp-section>
|
||||
<swp-section-header>
|
||||
<swp-section-title>
|
||||
<i class="ph ph-users"></i>
|
||||
Brugere
|
||||
</swp-section-title>
|
||||
</swp-section-header>
|
||||
|
||||
<swp-users-header>
|
||||
<swp-users-count>
|
||||
<strong>5 af 8</strong> brugere
|
||||
<swp-users-progress>
|
||||
<swp-users-progress-bar style="width: 62.5%"></swp-users-progress-bar>
|
||||
</swp-users-progress>
|
||||
</swp-users-count>
|
||||
<swp-btn class="primary">
|
||||
<i class="ph ph-user-plus"></i>
|
||||
Inviter bruger
|
||||
</swp-btn>
|
||||
</swp-users-header>
|
||||
|
||||
<swp-table-card>
|
||||
<swp-table>
|
||||
<swp-table-header>
|
||||
<swp-table-row>
|
||||
<swp-table-cell>Bruger</swp-table-cell>
|
||||
<swp-table-cell>Rolle</swp-table-cell>
|
||||
<swp-table-cell>Status</swp-table-cell>
|
||||
<swp-table-cell>Sidst aktiv</swp-table-cell>
|
||||
<swp-table-cell></swp-table-cell>
|
||||
</swp-table-row>
|
||||
</swp-table-header>
|
||||
<swp-table-body>
|
||||
<!-- User 1 - Owner -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar>MJ</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Maria Jensen</swp-user-name>
|
||||
<swp-user-email>maria@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge class="owner">Ejer</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I dag, 14:32</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 2 - Admin -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="purple">AS</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Anna Sørensen</swp-user-name>
|
||||
<swp-user-email>anna@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge class="admin">Admin</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I dag, 12:15</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 3 -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="blue">LP</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Louise Pedersen</swp-user-name>
|
||||
<swp-user-email>louise@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge>Medarbejder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I går, 17:45</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 4 -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="amber">KN</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Katrine Nielsen</swp-user-name>
|
||||
<swp-user-email>katrine@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge>Medarbejder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>27. dec, 09:30</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 5 - Invited -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="purple">SH</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Sofie Hansen</swp-user-name>
|
||||
<swp-user-email>sofie@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge>Medarbejder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="invited">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Invitation sendt
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>-</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Send invitation igen">
|
||||
<i class="ph ph-paper-plane-tilt"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Annuller invitation">
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
</swp-table-body>
|
||||
</swp-table>
|
||||
</swp-table-card>
|
||||
</swp-section>
|
||||
|
||||
<!-- ==========================================
|
||||
BILLING SECTION
|
||||
========================================== -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue