def
/
otb-cloud
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix device type dropdown styling (dark mode)

master
Don Kingdon 3 weeks ago
parent
b87431f88d
commit
b569577ab6
1 changed files with 40 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      app/templates/cloud/device_new.html

114
app/templates/cloud/device_new.html
Unescape View File

@ -1,89 +1,55 @@
{% extends "portal_base.html" %}
{% block title %}Add Device - OTB Cloud{% endblock %}
{% block title %}Add Device{% endblock %}
{% block portal_content %}
<div class="portal-page-header">
<div>
<h1 class="portal-page-title">Add Device</h1>
<p class="portal-client-name">{{ user_email }}</p>
<p class="portal-page-subtitle">
Create a named source for uploads like a laptop, phone, tablet, or workstation.
</p>
<p class="portal-page-subtitle">Register a new upload source.</p>
</div>
<div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
<div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
<a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back to Dashboard</a>
</div>
<div class="portal-toolbar">
<a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back</a>
</div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<section style="margin-bottom:22px;">
{% for category, message in messages %}
<div class="service-card" style="padding:14px 18px; margin-bottom:10px;">
<strong>{{ category|capitalize }}:</strong> {{ message }}
</div>
{% endfor %}
</section>
{% endif %}
{% endwith %}
<section class="services-grid">
<article class="service-card status-beta" style="max-width:900px;">
<div class="service-card-header">
<div>
<h2>Device Details</h2>
<p>This creates a device source and its storage folders.</p>
</div>
<div>
<span class="service-badge service-badge-beta">Setup</span>
</div>
</div>
<div class="service-card-actions">
<form method="post" action="{{ url_for('main.add_device') }}">
<div style="display:grid;gap:16px;max-width:680px;">
<div>
<label for="device_name" style="display:block;margin-bottom:6px;font-weight:700;">Device Name</label>
<input
id="device_name"
name="device_name"
type="text"
value="{{ device_name or '' }}"
placeholder="Example: Main Laptop"
style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:white;"
required
>
</div>
<form method="post" class="service-card" style="max-width:500px;">
<div style="margin-bottom:16px;">
<label>Device Name</label><br>
<input type="text" name="device_name" value="{{ device_name or '' }}" required style="width:100%;padding:10px;border-radius:8px;">
</div>
<div>
<label for="device_type" style="display:block;margin-bottom:6px;font-weight:700;">Device Type</label>
<select
id="device_type"
name="device_type"
style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:#0f1a2b;color:white;"
required
>
<option value="">Select type</option>
<option value="laptop" {% if device_type == 'laptop' %}selected{% endif %}>Laptop</option>
<option value="phone" {% if device_type == 'phone' %}selected{% endif %}>Phone</option>
<option value="tablet" {% if device_type == 'tablet' %}selected{% endif %}>Tablet</option>
<option value="desktop" {% if device_type == 'desktop' %}selected{% endif %}>Desktop</option>
<option value="workstation" {% if device_type == 'workstation' %}selected{% endif %}>Workstation</option>
<option value="other" {% if device_type == 'other' %}selected{% endif %}>Other</option>
</select>
</div>
<div style="margin-bottom:16px;">
<label>Device Type</label><br>
<select name="device_type" required class="otb-select">
<option value="">Select type</option>
<option value="laptop">Laptop</option>
<option value="phone">Phone</option>
<option value="tablet">Tablet</option>
<option value="workpc">Work PC</option>
<option value="homepc">Home PC</option>
<option value="other">Other</option>
</select>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<button class="portal-btn primary" type="submit">Create Device</button>
<a class="portal-btn" href="{{ url_for('main.dashboard') }}">Cancel</a>
</div>
</div>
</form>
</div>
</article>
</section>
<button class="portal-btn primary" type="submit">Create Device</button>
</form>
<style>
.otb-select {
width: 100%;
padding: 10px;
border-radius: 8px;
background: rgba(8, 18, 37, 0.9);
color: #e8eefc;
border: 1px solid rgba(255,255,255,0.15);
}
/* Fix dropdown list colors (some browsers) */
.otb-select option {
background: #081225;
color: #e8eefc;
}
</style>
{% endblock %}

Write Preview
Loading…
Cancel
Save