Skip to content

Commit ed7dcb8

Browse files
MatthewHanaMatthewHana
committed
General HTML fixes
Incorporated pull requests #1305 and #1306. Restored declaration of 'hidden' class to index file. Restored h2 in sections for navigation purposes. Cleaned up index.html.
1 parent b37738e commit ed7dcb8

File tree

2 files changed

+152
-124
lines changed

2 files changed

+152
-124
lines changed

‎radicale/web/internal_data/css/main.css

+6-5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ body{
1313
justify-content: space-around;
1414
}
1515

16+
main{
17+
width: 100%;
18+
}
19+
1620
.container{
1721
height: auto;
1822
min-height: 450px;
@@ -74,7 +78,7 @@ body{
7478
z-index: 999;
7579
}
7680

77-
#loadingscene span{
81+
#loadingscene h2{
7882
font-size: 2em;
7983
font-weight: bold;
8084
}
@@ -142,6 +146,7 @@ body{
142146
font-size: 1.5em;
143147
display: block;
144148
padding: 10px 0;
149+
margin: 0;
145150
}
146151

147152
#collectionsscene article small{
@@ -250,10 +255,6 @@ body{
250255
box-shadow: 2px 2px 7px #000000d6;
251256
}
252257

253-
.hidden{
254-
display: none !important;
255-
}
256-
257258
.title{
258259
word-wrap: break-word;
259260
font-weight: bold;

‎radicale/web/internal_data/index.html

+146-119
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,57 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<script src="fn.js"></script>
8-
<title>Radicale Web Interface</title>
9-
<link href="css/main.css" media="screen" rel="stylesheet">
10-
<link href="css/icon.png" type="image/png" rel="shortcut icon">
11-
12-
<nav id="logoutview" class="hidden">
13-
<span data-name="user" style="word-wrap:break-word;"></span>
14-
<a href="" class="red" data-name="link" title="Logout">Logout</a>
15-
</nav>
16-
17-
<section id="loadingscene">
18-
<img src="css/loading.svg" />
19-
<span>Loading</span>
20-
<p>Please wait...</p>
21-
<noscript>JavaScript is required</noscript>
22-
</section>
23-
24-
<section id="loginscene" class="container hidden">
25-
<div class="logocontainer">
26-
<img src="css/logo.svg" />
27-
</div>
28-
<h1>Sign in</h1><br />
29-
<form data-name="form">
30-
<input data-name="user" type="text" placeholder="Username">
31-
<input data-name="password" type="password" placeholder="Password">
32-
<button class="green" type="submit">Next</button>
33-
<span class="error" data-name="error"></span>
34-
</form>
35-
</section>
36-
37-
<section id="collectionsscene" class="hidden">
38-
<div class="fabcontainer">
39-
<a href="" class="green" data-name="new" title="Create a new addressbook or calendar"><img src="css/icons/new.svg" class="icon" alt="➕"></a></a>
40-
<a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar"><img src="css/icons/upload.svg" class="icon" alt="⬆️"></a></a>
41-
</div>
42-
43-
<article data-name="collectiontemplate" class="hidden">
44-
<div class="colorbar" data-name="color"></div>
45-
<span class="title" data-name="title">Title</span>
46-
</h2>
47-
<small>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>Radicale Web Interface</title>
8+
<link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
9+
<link href="css/icon.png" type="image/png" rel="icon">
10+
<style>.hidden {display: none !important;}</style>
11+
<script src="fn.js"></script>
12+
</head>
13+
14+
<body>
15+
<nav id="logoutview" class="hidden">
16+
<span data-name="user" style="word-wrap:break-word;"></span>
17+
<a href="" class="red" data-name="link" title="Logout">Logout</a>
18+
</nav>
19+
20+
<main>
21+
<section id="loadingscene">
22+
<img src="css/loading.svg" alt="Loading">
23+
<h2>Loading</h2>
24+
<p>Please wait...</p>
25+
<noscript>JavaScript is required</noscript>
26+
</section>
27+
28+
<section id="loginscene" class="container hidden">
29+
<div class="logocontainer">
30+
<img src="css/logo.svg" alt="Radicale">
31+
</div>
32+
<h1>Sign in</h1>
33+
<br>
34+
<form data-name="form">
35+
<input data-name="user" type="text" placeholder="Username">
36+
<input data-name="password" type="password" placeholder="Password">
37+
<button class="green" type="submit">Next</button>
38+
<span class="error" data-name="error"></span>
39+
</form>
40+
</section>
41+
42+
<section id="collectionsscene" class="hidden">
43+
<div class="fabcontainer">
44+
<a href="" class="green" data-name="new" title="Create a new addressbook or calendar">
45+
<img src="css/icons/new.svg" class="icon" alt="➕">
46+
</a>
47+
<a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar">
48+
<img src="css/icons/upload.svg" class="icon" alt="⬆️">
49+
</a>
50+
</div>
51+
<article data-name="collectiontemplate" class="hidden">
52+
<div class="colorbar" data-name="color"></div>
53+
<h3 class="title" data-name="title">Title</h3>
54+
<small>
4855
<span data-name="ADDRESSBOOK">Address book</span>
4956
<span data-name="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</span>
5057
<span data-name="CALENDAR_JOURNAL">Calendar and journal</span>
@@ -53,23 +60,35 @@ <h1>Sign in</h1><br />
5360
<span data-name="CALENDAR">Calendar</span>
5461
<span data-name="JOURNAL">Journal</span>
5562
<span data-name="TASKS">Tasks</span>
56-
</small>
57-
<input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
58-
<p data-name="description" style="word-wrap:break-word;">Description</p>
59-
<ul>
60-
<li><a href="" title="Download" class="green" data-name="download"><img src="css/icons/download.svg" class="icon" alt="🔗"></a></li>
61-
<li><a href="" title="Edit" class="blue" data-name="edit"><img src="css/icons/edit.svg" class="icon" alt="✏️"></a></li>
62-
<li><a href="" title="Delete" class="red" data-name="delete"><img src="css/icons/delete.svg" class="icon" alt="❌"></a></li>
63-
</ul>
64-
</article>
65-
</section>
66-
67-
<section id="editcollectionscene" class="container hidden">
68-
<h1>Edit Collection</h1>
69-
<p>Editing collection <span class="title" data-name="title">title</span></p>
70-
<form>
71-
Type:<br>
72-
<select data-name="type">
63+
</small>
64+
<input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
65+
<p data-name="description" style="word-wrap:break-word;">Description</p>
66+
<ul>
67+
<li>
68+
<a href="" title="Download" class="green" data-name="download">
69+
<img src="css/icons/download.svg" class="icon" alt="🔗">
70+
</a>
71+
</li>
72+
<li>
73+
<a href="" title="Edit" class="blue" data-name="edit">
74+
<img src="css/icons/edit.svg" class="icon" alt="✏️">
75+
</a>
76+
</li>
77+
<li>
78+
<a href="" title="Delete" class="red" data-name="delete">
79+
<img src="css/icons/delete.svg" class="icon" alt="❌">
80+
</a>
81+
</li>
82+
</ul>
83+
</article>
84+
</section>
85+
86+
<section id="editcollectionscene" class="container hidden">
87+
<h1>Edit Collection</h1>
88+
<p>Editing collection <span class="title" data-name="title">title</span>
89+
</p>
90+
<form> Type: <br>
91+
<select data-name="type">
7392
<option value="ADDRESSBOOK">addressbook</option>
7493
<option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
7594
<option value="CALENDAR_JOURNAL">calendar and journal</option>
@@ -78,25 +97,26 @@ <h1>Edit Collection</h1>
7897
<option value="CALENDAR">calendar</option>
7998
<option value="JOURNAL">journal</option>
8099
<option value="TASKS">tasks</option>
81-
</select><br>
82-
Title:<br>
83-
<input data-name="displayname" type="text"><br>
84-
Description:<br>
85-
<input data-name="description" type="text"><br>
86-
Color:<br>
87-
<input data-name="color" type="color"><br>
88-
<span class="error hidden" data-name="error"></span><br>
89-
<button type="submit" class="green" data-name="submit">Save</button>
90-
<button type="button" class="red" data-name="cancel">Cancel</button>
91-
</form>
92-
</section>
93-
94-
<section id="createcollectionscene" class="container hidden">
95-
<h1>Create a new Collection</h1>
96-
<p>Enter the details of your new collection.</p>
97-
<form>
98-
Type:<br>
99-
<select data-name="type">
100+
</select>
101+
<br> Title: <br>
102+
<input data-name="displayname" type="text">
103+
<br> Description: <br>
104+
<input data-name="description" type="text">
105+
<br> Color: <br>
106+
<input data-name="color" type="color">
107+
<br>
108+
<span class="error hidden" data-name="error"></span>
109+
<br>
110+
<button type="submit" class="green" data-name="submit">Save</button>
111+
<button type="button" class="red" data-name="cancel">Cancel</button>
112+
</form>
113+
</section>
114+
115+
<section id="createcollectionscene" class="container hidden">
116+
<h1>Create a new Collection</h1>
117+
<p>Enter the details of your new collection.</p>
118+
<form> Type: <br>
119+
<select data-name="type">
100120
<option value="ADDRESSBOOK">Address book</option>
101121
<option value="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</option>
102122
<option value="CALENDAR_JOURNAL">Calendar and journal</option>
@@ -105,41 +125,48 @@ <h1>Create a new Collection</h1>
105125
<option value="CALENDAR">Calendar</option>
106126
<option value="JOURNAL">Journal</option>
107127
<option value="TASKS">Tasks</option>
108-
</select><br>
109-
Title:<br>
110-
<input data-name="displayname" type="text"><br>
111-
Description:<br>
112-
<input data-name="description" type="text"><br>
113-
Color:<br>
114-
<input data-name="color" type="color"><br>
115-
<span class="error" data-name="error"></span><br>
116-
<button type="submit" class="green" data-name="submit">Create</button>
117-
<button type="button" class="red" data-name="cancel">Cancel</button>
118-
</form>
119-
</section>
120-
121-
<section id="uploadcollectionscene" class="container hidden">
122-
<h1>Upload Collection</h1>
123-
<ul>
124-
<li data-name="filetemplate" class="hidden">
125-
Uploading <span data-name="name">name</span><br>
126-
<img data-name="pending" src="css/loading.svg" alt="Please wait..."/>
127-
<span clas="successmessage";" data-name="success">Uploaded Successfully!</span>
128-
<span class="error" data-name="error"></span>
129-
</li>
130-
</ul>
131-
<form>
132-
<button type="button" class="red" data-name="close">Close</button>
133-
</form>
134-
</section>
135-
136-
<section id="deletecollectionscene" class="container hidden">
137-
<h1>Delete Collection</h1>
138-
<p>Do you want to delete the collection <span class="title" data-name="title">title</span>?</p>
139-
<p class="red">Warning: This action cannot be reversed.</p>
140-
<form>
141-
<button type="button" class="red" data-name="delete">Delete</button>
142-
<button type="button" class="blue" data-name="cancel">Cancel</button>
143-
</form>
144-
<span class="error hidden" data-name="error"></span><br>
145-
</section>
128+
</select>
129+
<br> Title: <br>
130+
<input data-name="displayname" type="text">
131+
<br> Description: <br>
132+
<input data-name="description" type="text">
133+
<br> Color: <br>
134+
<input data-name="color" type="color">
135+
<br>
136+
<span class="error" data-name="error"></span>
137+
<br>
138+
<button type="submit" class="green" data-name="submit">Create</button>
139+
<button type="button" class="red" data-name="cancel">Cancel</button>
140+
</form>
141+
</section>
142+
143+
<section id="uploadcollectionscene" class="container hidden">
144+
<h1>Upload Collection</h1>
145+
<ul>
146+
<li data-name="filetemplate" class="hidden"> Uploading <span data-name="name">name</span>
147+
<br>
148+
<img data-name="pending" src="css/loading.svg" alt="Please wait...">
149+
<span class="successmessage" data-name="success">Uploaded Successfully!</span>
150+
<span class="error" data-name="error"></span>
151+
</li>
152+
</ul>
153+
<form>
154+
<button type="button" class="red" data-name="close">Close</button>
155+
</form>
156+
</section>
157+
158+
<section id="deletecollectionscene" class="container hidden">
159+
<h1>Delete Collection</h1>
160+
<p>Do you want to delete the collection <span class="title" data-name="title">title</span>? </p>
161+
<p class="red">WARNING: This action cannot be reversed.</p>
162+
<form>
163+
<button type="button" class="red" data-name="delete">Delete</button>
164+
<button type="button" class="blue" data-name="cancel">Cancel</button>
165+
</form>
166+
<span class="error hidden" data-name="error"></span>
167+
<br>
168+
</section>
169+
170+
</main>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)