c1d2df9327
Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title` Improves component consistency across multiple features: - Adds structured card headers - Introduces more semantic HTML elements - Enhances layout and readability of card components Updates CSS and component styles to support new structure
118 lines
4.7 KiB
Text
118 lines
4.7 KiB
Text
<swp-two-column-grid>
|
||
<!-- EMAIL -->
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-envelope"></i>
|
||
Email
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Bekræftelse</swp-toggle-label>
|
||
<swp-toggle-description>Sendes når en aftale er booket</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Påmindelse</swp-toggle-label>
|
||
<swp-toggle-description>Sendes inden aftalen</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Aflysning</swp-toggle-label>
|
||
<swp-toggle-description>Sendes når en aftale er aflyst</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Flytning</swp-toggle-label>
|
||
<swp-toggle-description>Sendes når en aftale er flyttet</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
|
||
<swp-card-note>Email-påmindelser er gratis.</swp-card-note>
|
||
</swp-card>
|
||
|
||
<!-- SMS -->
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-chat-text"></i>
|
||
SMS
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Bekræftelse online <span class="text-secondary">(0,30 kr.)</span></swp-toggle-label>
|
||
<swp-toggle-description>Sendes ved online booking</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="no">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Bekræftelse manuelt <span class="text-secondary">(0,30 kr.)</span></swp-toggle-label>
|
||
<swp-toggle-description>Ved oprettelse i kalender</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<div>
|
||
<swp-toggle-label>Påmindelse <span class="text-purple">(Premium)</span></swp-toggle-label>
|
||
<swp-toggle-description>Sendes inden aftalen</swp-toggle-description>
|
||
</div>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
|
||
<swp-section-divider></swp-section-divider>
|
||
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Påmindelse sendes</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="2">2 timer før</option>
|
||
<option value="4">4 timer før</option>
|
||
<option value="12">12 timer før</option>
|
||
<option value="24" selected>24 timer før</option>
|
||
<option value="48">48 timer før</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Sendes mellem</swp-edit-label>
|
||
<swp-time-range>
|
||
<input type="time" value="08:00">
|
||
<span>–</span>
|
||
<input type="time" value="21:00">
|
||
</swp-time-range>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card>
|
||
</swp-two-column-grid>
|