styled join and make pages

wlmac · Dec 8, 2023 · 3bf4a50 · 3bf4a50
1 parent 082279b
commit 3bf4a50
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 36 deletions.
diff --git a/core/forms.py b/core/forms.py
@@ -7,15 +7,15 @@
 class TeamMakeForm(forms.ModelForm):
     class Meta:
         widgets = dict(
-            name=forms.TextInput(attrs={"placeholder": "Json's Team"}),
+            name=forms.TextInput(attrs={"placeholder": "team name"}),
         )
         model = Team
         fields = ("name",)
 
 
 class TeamJoinForm(forms.Form):
     code = forms.CharField(
-        label=_l("join code"),
+        label=_l(""),
         max_length=8,
         strip=True,
         required=True,

diff --git a/core/migrations/0021_alter_hint_options.py b/core/migrations/0021_alter_hint_options.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.1.13 on 2023-12-08 01:15
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0020_alter_logicpuzzlehint_qr_index_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='hint',
+            options={},
+        ),
+    ]
diff --git a/core/static/core/team.css b/core/static/core/team.css
@@ -0,0 +1,59 @@
+:root {
+	--team-bg: #ededed;
+}
+
+.team-content {
+	position: absolute;
+    top: 50%;  
+    left: 50%; 
+    transform: translate(-50%, -50%);
+}
+
+.team-heading {
+	padding: 5px;
+}
+
+input {
+	outline: none;
+	background: var(--team-bg);
+	border: 0px solid var(--team-bg);
+	color: #767b82;
+}
+
+input[type=submit] {
+	border: 0px solid var(--team-bg);
+	/*box-shadow: 0px 0px 0px 4px #fff;*/
+	background: #fff;
+	color: white;
+	font: inherit;
+	font-family: inherit;
+	margin-left: 0;
+	border-radius: 0 0.3rem 0.3rem 0;
+
+	color: #a4a4a4;
+	font-weight: bold;
+}
+
+input[type=submit]:hover {
+  background: rgba(255, 255, 255, 0.95);
+  transition-duration: .3s;
+  color: #848a91;
+}
+input[type=submit]:active {
+  background: rgba(255, 255, 255, 0.90);
+  color: #000;
+}
+
+.input-padding {
+	margin: 0;
+	padding: 0;	
+	/*
+	border: 0px solid #d5d5d5;
+	border-radius: 0 0.3rem 0.3rem 0;
+	background: #d5d5d5;
+	height: 80%;*/
+}
+
+input::placeholder {
+  color: #bdb9b9;
+}
diff --git a/core/templates/core/base.html b/core/templates/core/base.html
@@ -7,6 +7,7 @@
     <title>{% block title %}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="{% static 'core/base.css' %}"/>
+    {% block extracss %}{% endblock %}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap" rel="stylesheet">

diff --git a/core/templates/core/index.html b/core/templates/core/index.html
@@ -18,21 +18,21 @@
 
 
 {% block body %}
-    {% if IN_HUNT or FUTURE_HUNT_EXISTS %}
-{% if request.user.in_team and IN_HUNT %}
-  {% url 'qr_first' as first_url %} {% comment %}todo: add logic to swich text to /current{% endcomment %}
-    {% url 'qr_current' as current_url %}
-  {% blocktranslate %}
-      {{ hunt_name }} has started! go decrypt your <a href="{{ first_url }}">first hint</a>!
-  {% endblocktranslate %}
-  <br />
-  {% if not request.user.current_team.solo %}
-    {% url 'team_invite' as invite_url %}
+{% if IN_HUNT or FUTURE_HUNT_EXISTS %}
+  {% if request.user.in_team and IN_HUNT %}
+    {% url 'qr_first' as first_url %} {% comment %}todo: add logic to swich text to /current{% endcomment %}
+      {% url 'qr_current' as current_url %}
     {% blocktranslate %}
-      or, would you like to <a href="{{ invite_url }}">invite more team members</a>?
+        {{ hunt_name }} has started! go decrypt your <a href="{{ first_url }}">first hint</a>!
     {% endblocktranslate %}
-  {% endif %}
-{% else %}
+    <br />
+    {% if not request.user.current_team.solo %}
+      {% url 'team_invite' as invite_url %}
+      {% blocktranslate %}
+        or, would you like to <a href="{{ invite_url }}">invite more team members</a>?
+      {% endblocktranslate %}
+    {% endif %}
+  {% else %}
   <h3>
   {% if request.user.in_team %}
     {% if request.user.current_team.solo %}
@@ -64,7 +64,7 @@ <h3>
       </li>
     {% endif %}
   </ul>
-{% endif %}
+  {% endif %}
 {% else %}
     <h2>
         {% blocktranslate %}

diff --git a/core/templates/core/team_join.html b/core/templates/core/team_join.html
@@ -6,16 +6,30 @@
 {% translate "Join a Team" %}
 {% endblock %}
 
+{% block extracss %}
+<link rel="stylesheet" href="{% static 'core/team.css' %}"/>
+{% endblock %}
+
+<!--
 {% block header %}
-{% translate "join a team" %}
 {% endblock %}
+-->
 
 {% block body %}
-  <h3>{% translate "either enter your team's join code" %}</h3>
-  <form action="{% url 'join' %}" method="post">
-    {% csrf_token %}
-    {{ form }}
-    <input type="submit" value="{% translate 'Join' %}" />
-  </form>
-  <h3>{% translate "or, scan your team's QR code" %}</h3>
+
+  <div class="team-content">
+    <div class="team-heading">
+      {% translate "join a team" %}
+    </div>
+    <!--<h3>{% translate "either enter your team's join code" %}</h3>-->
+    <form action="{% url 'join' %}" method="post">
+
+      {% csrf_token %}
+      {{ form }}
+      <div class="input-padding">
+        <input type="submit" value="✔" />
+      </div>
+    </form>
+  </div>
+  <!--<h3>{% translate "or, scan your team's QR code" %}</h3>-->
 {% endblock %}
diff --git a/core/templates/core/team_new.html b/core/templates/core/team_new.html
@@ -6,22 +6,26 @@
 {% translate "Make a Team" %}
 {% endblock %}
 
-{% block header %}
-{% translate "make a team" %}
+{% block extracss %}
+<link rel="stylesheet" href="{% static 'core/team.css' %}"/>
 {% endblock %}
 
-{% block head_end %}
-<style>
-  .centered { display: flex; justify-content: center}
-</style>
+<!--
+{% block header %}
 {% endblock %}
+-->
 
 {% block body %}
-    <div class="centered">
+<div class="team-content">
+    <div class="team-heading">
+      {% translate "make a team" %}
+    </div>
   <form action="{% url 'team_new' %}" method="post">
     {% csrf_token %}
     {{ form }}
-    <input type="submit" value="{% translate 'create' %}" />
+    <div class="input-padding">
+        <input type="submit" value="✔" />
+      </div>
   </form>
-    </div>
+</div>
 {% endblock %}
diff --git a/core/urls.py b/core/urls.py
@@ -13,7 +13,7 @@
     path("catalog", qr.qr_catalog, name="qr_catalog"),
     path("signal", qr.qr_signal, name="qr_signal"),
     path("team/join/", team.join, name="join"),
-    path("team/new", team.make, name="team_new"),
+    path("team/make/", team.make, name="team_new"),
     path("team/solo", team.solo, name="team_solo"),
     path("team/invite", team.invite, name="team_invite"),
     path("clues", puzzle.logic_clues, name="logic_clues"),

diff --git a/core/views/team.py b/core/views/team.py
@@ -53,8 +53,8 @@ def join(request):
 
 @login_required
 @require_http_methods(["GET", "POST"])
-@block_if_current_hunt
-@upcoming_hunt_required
+# @block_if_current_hunt
+# @upcoming_hunt_required
 def make(request):
     if request.method == "POST":
         form = TeamMakeForm(request.POST)