ialbert
/
www-app-microjournal
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

- Logout 

- CSS work
- Webapp icon
master
Rocketsoup 3 vuotta sitten
vanhempi
cf52c5ec33
commit
e3a1d2e8b3
11 muutettua tiedostoa jossa 163 lisäystä ja 21 poistoa
Jaettu näkymä Näytä diff tilastot
  1. BIN
      htdocs/apple-touch-icon-114.png
  2. BIN
      htdocs/apple-touch-icon-120.png
  3. BIN
      htdocs/apple-touch-icon-152.png
  4. BIN
      htdocs/apple-touch-icon-167.png
  5. BIN
      htdocs/apple-touch-icon-180.png
  6. BIN
      htdocs/apple-touch-icon-58.png
  7. BIN
      htdocs/apple-touch-icon-76.png
  8. BIN
      htdocs/apple-touch-icon-80.png
  9. BIN
      htdocs/apple-touch-icon-87.png
  10. 40
    1
      htdocs/index.php
  11. 123
    20
      htdocs/journal.css

BIN
htdocs/apple-touch-icon-114.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-120.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-152.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-167.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-180.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-58.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-76.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-80.png Näytä tiedosto


BIN
htdocs/apple-touch-icon-87.png Näytä tiedosto


+ 40
- 1
htdocs/index.php Näytä tiedosto 

@@ -569,9 +569,44 @@ class HTMLPage {
569 569 
 					<title>Microjournal</title>
570 570 
 					<meta charset="UTF-8" />
571 571 
 					<link rel="stylesheet" type="text/css" href="journal.css" />
572 
+					<link rel="apple-touch-icon" sizes="58x58" href="apple-touch-icon-58.png" />
573 
+					<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76.png" />
574 
+					<link rel="apple-touch-icon" sizes="80x80" href="apple-touch-icon-80.png" />
575 
+					<link rel="apple-touch-icon" sizes="87x87" href="apple-touch-icon-87.png" />
576 
+					<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114.png" />
577 
+					<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120.png" />
578 
+					<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152.png" />
579 
+					<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167.png" />
580 
+					<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180.png" />
581 
+					<meta name="apple-mobile-web-app-title" content="μJournal" />
582 
+					<meta name="apple-mobile-web-app-capable" content="yes" />
583 
+					<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />
584 
+					<meta name="theme-color" content="#444" media="(prefers-color-scheme: dark)" />
572 585 
 					<meta name="viewport" content="user-scalable=no,width=device-width,viewport-fit=cover" />
573 586 
 				</head>
574 587 
 				<body>
588 
+					<nav>
589 
+						<div class="top-nav">
590 
+							<span class="title">Microjournal</span>
591 
+			HTML
592 
+		);
593 
+		if (User::$current) {
594 
+			print(<<<HTML
595 
+							<div class="menu-container">
596 
+								<details>
597 
+									<summary><span>☰</span></summary>
598 
+
599 
+									<ul>
600 
+										<a href="?logout"><li>Log out</li></a>
601 
+									</ul>
602 
+								</details>
603 
+							</div>
604 
+				HTML
605 
+			);
606 
+		}
607 
+		print(<<<HTML
608 
+						</div>
609 
+					</nav>
575 610 
 					<div class="content">
576 611 
 			HTML
577 612 
 		);
 
@@ -601,7 +636,7 @@ class HTMLPage {
601 636 
 	public static function render_post_form(): void {
602 637 
 		print(<<<HTML
603 638 
 			<form id="post-form" method="POST">
604 
-				<div class="post-container"><textarea name="body" placeholder="Your journal post here…"></textarea></div>
639 
+				<div class="text-container"><textarea name="body" placeholder="Your journal post here…"></textarea></div>
605 640 
 				<input type="hidden" name="action" value="post" />
606 641 
 				<div class="submit-post"><input type="submit" value="Post" /></div>
607 642 
 			</form>
 
@@ -719,6 +754,10 @@ check_setup();
719 754 
 User::update_current();
720 755 
 switch ($_SERVER['REQUEST_METHOD']) {
721 756 
 	case 'GET':
757 
+		if (array_key_exists('logout', $_GET)) {
758 
+			User::sign_out();
759 
+			HTMLPage::redirect_home();
760 
+		}
722 761 
 		HTMLPage::render_page_start();
723 762 
 		HTMLPage::render_error_if_needed();
724 763 
 		if (User::$current) {

+ 123
- 20
htdocs/journal.css Näytä tiedosto 

@@ -7,34 +7,98 @@
7 7 
 	line-height: 1.25;
8 8 
 	font-size: 12pt;
9 9 
 }
10 
-.error {
11 
-	padding: 1em;
12 
-	border: 1px solid #400;
13 
-	background-color: #fcc;
14 
-	color: #d00;
10 
+body {
11 
+	margin: 0;
12 
+	padding: 0;
13 
+}
14 
+a {
15 
+	color: #d83;
16 
+	text-decoration: none;
17 
+}
18 
+
19 
+.top-nav {
20 
+	position: fixed;
21 
+	top: 0;
22 
+	left: 0;
23 
+	right: 0;
24 
+	height: 2em;
25 
+	text-align: center;
26 
+	background-color: white;
27 
+	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
28 
+}
29 
+.title {
30 
+	display: inline-block;
31 
+	font-size: 1.2rem;
32 
+	line-height: 1.2rem;
15 33 
 	font-weight: bold;
16 
-	margin-bottom: 1em;
34 
+	padding-top: 0.4rem;
17 35 
 }
18 
-.post {
19 
-	margin-top: 0.5em;
20 
-	margin-bottom: 1em;
36 
+.menu-container {
37 
+	position: absolute;
38 
+	top: 0;
39 
+	right: 0;
21 40 
 }
22 
-.post p {
23 
-	margin: 0 0 1em 0;
41 
+.menu-container summary {
42 
+	list-style-type: none;
43 
+	text-align: right;
44 
+	-webkit-user-select: none;
45 
+	user-select: none;
24 46 
 }
25 
-.post p:last-child {
47 
+.menu-container summary:hover {
48 
+	color: #d83;
49 
+}
50 
+.menu-container summary span {
51 
+	display: inline-block;
52 
+	line-height: 1rem;
53 
+	padding: 0.5rem 0.7rem;
26 54 
 	margin: 0;
55 
+	border-radius: 0.5rem;
27 56 
 }
28 
-.post-date {
29 
-	font-size: 80%;
30 
-	color: #888;
31 
-	margin-top: 0.5em;
57 
+.menu-container details {
58 
+	text-align: left;
59 
+}
60 
+.menu-container details[open] summary span {
61 
+	background-color: #d83;
62 
+	color: white;
63 
+}
64 
+.menu-container ul {
65 
+	margin: 0;
66 
+	padding: 0;
67 
+	list-style-type: none;
68 
+	border: 1px solid #ccc;
69 
+	background-color: #eee;
70 
+	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
71 
+}
72 
+.menu-container a li {
73 
+	color: #d83;
74 
+}
75 
+.menu-container a:hover li {
76 
+	background-color: #d83;
77 
+	color: black;
78 
+}
79 
+.menu-container li {
80 
+	padding: 0.4em 1em;
81 
+}
82 
+.menu-container a + a li {
83 
+	border-top: 1px solid #ccc;
84 
+}
85 
+summary::-webkit-details-marker {
86 
+	display: none;
32 87 
 }
88 
+
33 89 
 .content {
34 90 
 	max-width: 66ch;
35 
-	margin-left: auto;
36 
-	margin-right: auto;
37 
-	padding: 0.25em;
91 
+	margin: 2.5em auto 2em auto;
92 
+	padding: 0.5em;
93 
+}
94 
+
95 
+.error {
96 
+	padding: 1em;
97 
+	border: 1px solid #400;
98 
+	background-color: #fcc;
99 
+	color: #d00;
100 
+	font-weight: bold;
101 
+	margin-bottom: 1em;
38 102 
 }
39 103 
 .important {
40 104 
 	padding: 1em;
 
@@ -43,20 +107,59 @@
43 107 
 	color: black;
44 108 
 	margin-bottom: 1em;
45 109 
 }
110 
+
46 111 
 textarea {
47 112 
 	width: 100%;
48 113 
 	height: 8em;
49 114 
 	font-family: inherit;
50 115 
 	margin: 0;
116 
+	box-sizing: border-box;
117 
+}
118 
+textarea::placeholder {
119 
+	font-size: 1rem;
120 
+}
121 
+.submit-post {
122 
+	text-align: right;
51 123 
 }
52 124 
 input[type="submit"] {
53 
-	margin-top: 1em;
125 
+	margin-top: 0.5em;
126 
+	min-width: 15ch;
127 
+}
128 
+
129 
+.post-container {
130 
+	margin-top: 1.5rem;
131 
+}
132 
+.post {
133 
+	margin-top: 0.5em;
134 
+	margin-bottom: 1em;
135 
+}
136 
+.post p {
137 
+	margin: 0 0 1em 0;
54 138 
 }
139 
+.post p:last-child {
140 
+	margin: 0;
141 
+}
142 
+.post-date {
143 
+	font-size: 80%;
144 
+	color: #888;
145 
+	margin-top: 0.5em;
146 
+}
147 
+
55 148 
 @media(prefers-color-scheme: dark) {
56 149 
 	:root, textarea, input, select {
57 150 
 		background-color: #222;
58 151 
 		color: white;
59 152 
 	}
153 
+	.top-nav {
154 
+		background-color: #444;
155 
+	}
156 
+	.menu-container ul {
157 
+		border: 1px solid black;
158 
+		background-color: #444;
159 
+	}
160 
+	.menu-container a + a li {
161 
+		border-top: 1px solid #000;
162 
+	}
60 163 
 }
61 164 
 @media screen and (max-width: 450px) {
62 165 
 	:root {

Write Preview
Loading…
Peruuta
Tallenna