Merge pull request #106 from themotte/create_post_mobile

Fix bad post button UI on mobile

files/assets/css/TheMotte.css

@@ -33,6 +33,15 @@
 	border-color: var(--primary);
 }
 
+.btn-secondary:not(:disabled):not(.disabled):active, 
+.btn-secondary:not(:disabled):not(.disabled).active, 
+.show > .btn-secondary.dropdown-toggle {
+	color: var(--primary-dark1);
+}
+.btn-secondary:focus, .btn-secondary.focus {
+	color: var(--primary-dark1);
+}
+
 a  { color: var(--primary); }
 
 .btn-primary { color: var(--primary); }
@@ -69,7 +78,10 @@ a  { color: var(--primary); }
 	background-color: var(--primary-light2) !important;
 	border: var(--primary) solid 0.1px;
 }
-
+.primary_banner {
+	min-height: 20vh;
+	object-fit: cover;
+}
 .border {
 	border-color: var(--primary) !important;
 }
@@ -92,7 +104,6 @@ a  { color: var(--primary); }
 	background: transparent;
 	border-color: var(--primary) !important;
 }
-
 .btn-success {
 	border-color: #38A169 !important;
 }

files/assets/css/main.css

@@ -751,6 +751,9 @@ input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].bt
 .dropup, .dropdown {
 	position: relative;
 }
+.d-nowrap {
+	white-space: nowrap;
+}
 .dropdown-toggle {
 	white-space: nowrap;
 }

files/routes/front.py

@@ -473,8 +473,7 @@ def random_post(v):
 @app.get("/random_user")
 @auth_required
 def random_user(v):
-
+	u = g.db.query(User.username).order_by(func.random()).first()
-	u = g.db.query(User.username).filter(User.song != None).order_by(func.random()).first()
 	
 	if u: u = u[0]
 	else: abort(404)

files/templates/default.html

@@ -215,10 +215,10 @@
 {% block Banner %}
 	{% if '@' not in request.path %}		
 		{% if sub %}
-			<img alt="/h/{{sub.name}} banner" role="button" data-bs-toggle="modal" data-bs-target="#expandImageModal" onclick="expandDesktopImage('{{sub.banner_url}}')" loading="lazy" src="{{sub.banner_url}}" width=100% style="object-fit:cover;max-height:25vw">
+			<img alt="/h/{{sub.name}} banner" class="primary_banner" role="button" data-bs-toggle="modal" data-bs-target="#expandImageModal" onclick="expandDesktopImage('{{sub.banner_url}}')" loading="lazy" src="{{sub.banner_url}}" width=100% style="object-fit:cover;max-height:25vw">
 		{% else %}
 			<a href="/">
-				<img alt="site banner" src="/assets/images/{{SITE_NAME}}/banner.webp?v=1046" width="100%">
+				<img alt="site banner" class="primary_banner" src="/assets/images/{{SITE_NAME}}/banner.webp?v=1046" width="100%">
 			</a>	
 		{% endif %}
 	{% endif %}
@@ -246,9 +246,6 @@
 			{% block desktopBanner %}
 			{% endblock %}
 
-			{% block PseudoSubmitForm %}
-			{% endblock %}
-
 			{% block searchText %}
 			{% endblock %}
 

files/templates/header.html

@@ -59,16 +59,16 @@
 			{% endif %}
 			
 			{% if not err %}
-				<a class="mobile-nav-icon d-md-none" href="/random_user"><i class="fas fa-music align-middle text-gray-500 black"></i></a>
+				<a class="mobile-nav-icon d-md-none" href="/random_user" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle align-middle text-gray-500 black"></i></a>
-				<a class="mobile-nav-icon d-md-none" href="/random_post"><i class="fas fa-random align-middle text-gray-500 black"></i></a>
+				<a class="mobile-nav-icon d-md-none" href="/random_post" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random align-middle text-gray-500 black"></i></a>
 			{% if v and v.admin_level > 1 %}
-				<a class="mobile-nav-icon d-md-none" href="/admin"><i class="fas fa-crown align-middle text-gray-500 black"></i></a>
+				<a class="mobile-nav-icon d-md-none" href="/admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown align-middle text-gray-500 black"></i></a>
 			{% endif %}
 
 			{% if v %}
-				<a class="mobile-nav-icon d-md-none" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit"><i class="fas fa-feather-alt align-middle text-gray-500 black"></i></a>
+				<a class="mobile-nav-icon d-md-none" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
 			{% else %}
-				<a class="mobile-nav-icon d-md-none" href="/login"><i class="fas fa-feather-alt align-middle text-gray-500 black"></i></a>
+				<a class="mobile-nav-icon d-md-none" href="/login" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
 			{% endif %}
 			<button class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
 			aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
@@ -80,16 +80,16 @@
 			<ul class="navbar-nav ml-auto d-none d-md-flex">
 
 				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
-					<a class="nav-link" href="/random_user/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random user"><i class="fas fa-music"></i></a>
+					<a class="nav-link" href="/random_user/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle"></i></a>
 				</li>
 
 				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
-					<a class="nav-link" href="/random_post/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random post"><i class="fas fa-random"></i></a>
+					<a class="nav-link" href="/random_post/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random"></i></a>
 				</li>
 
 				{% if v and v.admin_level > 1 %}
 				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
-					<a class="nav-link" href="/admin/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin tools"><i class="fas fa-crown{% if v.has_report_queue %} text-success{% endif %}"></i></a>
+					<a class="nav-link" href="/admin/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown{% if v.has_report_queue %} text-success{% endif %}"></i></a>
 				</li>
 				{% endif %}
 
@@ -109,10 +109,6 @@
 
 				{% endif %}
 
-				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
-					<a class="nav-link" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create post"><i class="fas fa-feather-alt"></i></a>
-				</li>
-
 				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
 					<a class="nav-link" href="/comments" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comments"><i class="fas fa-comment-dots"></i></a>
 				</li>
@@ -124,6 +120,10 @@
 
 				{% endif %}
 			
+				<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
+					<a class="nav-link" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit"></i></a>
+				</li>
+
 				<li class="nav-item d-flex align-items-center justify-content-center text-center">
 					<div class="dropdown">
 						<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
@@ -196,8 +196,6 @@
 				
 				<a class="nav-item nav-link" rel="nofollow noopener noreferrer" href="https://github.com/themotte/rDrama"><i class="fab fa-github fa-fw mr-3"></i>Source code</a>
 
-				<a class="nav-item nav-link" rel="nofollow noopener noreferrer" href="{{config('GUMROAD_LINK')}}"><i class="fas fa-dollar-sign fa-fw mr-3"></i>Donate</a>
-
 				<a class="nav-item nav-link" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
 
 				<li class="nav-item border-top border-bottom mt-2 pt-2">

files/templates/home.html

@@ -56,6 +56,11 @@
 
 			{% block navbar %}
 			<div class="d-flex align-items-center">
+				<a href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" class="btn btn-secondary ml-2 mr-2 d-nowrap">
+					<i class="fas fa-edit mr-2 "></i>
+					Post
+				</a>
+
 				<div class="dropdown dropdown-actions mx-2">
 					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						{% if t=="hour" %}<i class="fas fa-clock mr-2 "></i>
@@ -108,40 +113,6 @@
 
 {% endblock %}
 
-{% block PseudoSubmitForm %}
-
-<div class="row no-gutters d-none d-lg-flex mt-3 {% if not v %}mb-3{% endif %}">
-
-	<div class="col">
-		<div class="card pseudo-submit-form border">
-			<div class="card-header bg-gray-100">
-				<div class="mb-0">CREATE A POST</div>
-				<ul class="list-inline no-bullets mb-0 d-none">
-					<li class="list-inline-item active mr-4"><i class="fas fa-align-left text-gray-400"></i></li>
-					<li class="list-inline-item"><i class="fas fa-link text-gray-400"></i></li>
-				</ul>
-			</div>
-			<div class="card-body">
-				{% if v %}
-					<a href="{% if sub %}/h/{{sub.name}}{% endif %}/submit">
-						<input autocomplete="off" type="text" class="form-control"
-						aria-label="Username"
-						aria-describedby="basic-addon1">
-					</a>
-				{% else %}
-					<a href="/signup">
-						<input autocomplete="off" type="text" class="form-control"
-						aria-label="Username"
-						aria-describedby="basic-addon1">
-					</a>
-				{% endif %}
-			</div>
-		</div>
-	</div>
-
-</div>
-{% endblock %}
-
 {% block content %}
 
 <div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}">

files/templates/home_comments.html

@@ -1,6 +1,5 @@
 {% extends "default.html" %}
 
-{% block PseudoSubmitForm %}{% endblock %}
 {% block sortnav %}{% endblock %}
 
 {% block content %}

files/templates/mine.html

@@ -1,13 +1,6 @@
 {% extends "home.html" %}
-
-{% block PseudoSubmitForm %}{% endblock %}
-
-
 {% block customPadding %}{% endblock %}
-
 {% block content %}
-
-
 <div class="row mt-3 p-md-4">
 
 	{% block maincontent %}

files/templates/notifications.html

@@ -4,8 +4,6 @@
 
 {% block pagetype %}{% endblock %}
 
-{% block PseudoSubmitForm %}{% endblock %}
-
 {% block navbar %}
 <div class="font-weight-bold py-3"></div>
 {% endblock %}

files/templates/search.html

@@ -6,8 +6,6 @@
 <title>Search for "{{query}}" - {{SITE_NAME}}"</title> <meta name="description" content="{{total}} result{{'s' if total != 1 else ''}}">
 {% endblock %}
 
-{% block PseudoSubmitForm %}{% endblock %}
-
 {% block navbar %}
 	{% if not '/users/' in request.path %}
 		<div class="mt-5 d-flex align-items-center">

files/templates/transfers.html

@@ -1,6 +1,5 @@
 {% extends "default.html" %}
 
-{% block PseudoSubmitForm %}{% endblock %}
 {% block sortnav %}{% endblock %}
 
 {% block content %}