worked on making ui of polls home page after signin

polls/static/polls/header.js

@@ -0,0 +1,17 @@
+
+function toggle_profile_options(event){
+    event.stopPropagation();
+        
+    if(profile_options.classList.toggle("hidden")){
+        document.removeEventListener("click",hide_profile_options);
+    }
+    else{
+        document.addEventListener("click",hide_profile_options);
+    }
+}
+
+function hide_profile_options(){
+    console.log("working") 
+    profile_options.classList.add("hidden");
+    document.removeEventListener("click",hide_profile_options);
+}

polls/static/polls/index.css

@@ -1,4 +1,4 @@
-.questions{
+/* .questions{
     display: flex;
     flex-wrap: wrap;
 }
@@ -30,4 +30,209 @@
     right: 5px;
     padding: 0;
     margin: 0;
+} */
+
+
+/***********************New css*****************************/
+
+
+*{
+    padding:0px;
+    margin: 0px;
+}
+
+
+
+
+header{
+    background-color: #5B66C6;
+    color:white;
+    height:80px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 80px;
+}
+header>#app_name{
+    font-size: larger;
+}
+
+#profile{
+    background-color: #00000058;
+    
+    height: 60px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    position:relative;
+}
+#profile:hover{
+    cursor: pointer;
+}
+
+#profile>#first_alpha{
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+
+}
+
+#profile>#profile_options{
+    position: absolute;
+    right:0;
+    top: 100%;
+    margin-top:10px;
+
+    background-color: #ffffff;
+
+    width: 180px;
+    
+    box-shadow: 0px 4px 29px 0px #0000004b;
+    border-radius: 10px;
+
+    overflow: hidden;
+}
+#profile_options.hidden{
+    display: none;
+}
+
+#profile_options>.option{
+
+    padding: 10px 0;
+    color:black;
+    border-bottom: #C3C3C3 solid 1px;
+    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#profile_options>.option:last-child{
+    border-bottom:none; /*used to remove border of last option*/
+}
+
+#profile_options>.option:hover{
+    background-color: gray;
+    color:white;
+}
+
+
+
+
+/*********************sub header***************************/
+#sub_header{
+    font-weight:100;
+    padding:40px 40px;
+    padding-bottom: 0px;
+}
+
+
+/*******************main container*******************************/
+
+#main_container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+.question_container{
+    width:500px;
+    
+    color:#ffffff;
+    background-color: #5B66C6;
+    
+    border-radius: 7px;
+    box-shadow: 0px 20px 52px 0px #0000004b;
+    overflow: hidden;
+    margin-top:40px;
+}
+
+.question_header{
+    padding: 10px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+.question_meta{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 30px;
+
+    font-size: small;
+    font-weight: 100;
+}
+
+.question_header>span{
+    width: 60%;
+}
+.question_header>.right_section{
+    display: flex;
+    align-items: center;
+
+}
+.question_header>.right_section>img{
+    fill: white;
+    height: 25px;
+    
+    
+}  
+
+.question_container>.form_container{
+    box-sizing: border-box;
+    padding: 10px 20px;
+    width: 100%;
+    border-radius: 7px;
+
+    background-color: white;
+    
+    
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+.choices{
+    margin-top: 30px;
+    width: 100%;
+}
+
+.choice{
+    margin: 10px 0;
+    padding: 10px 20px;
+    
+    background-color: #5b66c670;
+    
+    border-radius: 3px;
+}
+
+.choice_text{
+    margin-left: 20px;
+}
+
+.choice:hover{
+    background-color: #5B66C6;
+    /* color:#C3C3C3; */
+    cursor: pointer;
+}
+
+.vote_btn{
+    margin: 10px 0;
+    border:none;
+    outline: none;
+    
+    background-color: #5B66C6;
+    color: white;
+    padding: 10px 30px;
+    border-radius: 8px;
+}
+
+.vote_btn:hover{
+    cursor: pointer;
 }

polls/static/polls/login.css

@@ -3,9 +3,6 @@
     --button-radius:6px;
 }
 
-*{
-    font-family: 'Poppins';
-}
 #title{
     margin:0;
     padding:0;

polls/static/polls/signup.css

@@ -3,9 +3,6 @@
     --button-radius:6px;
 }
 
-*{
-    font-family: 'Poppins';
-}
 #title{
     margin:0;
     padding:0;

polls/templates/polls/font.html

@@ -0,0 +1,6 @@
+<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+<style>
+    *{
+        font-family: 'Poppins';
+    }
+</style>

polls/templates/polls/index.html

@@ -2,12 +2,79 @@
 <head>
     {% load static %}
     <link type="text/css" rel="stylesheet" href="{% static 'polls/index.css' %}">
+    {% include 'polls/font.html' %}
 </head>
 <body>
-    <h1>Polling App</h1>
-    {{ request.user }}
+    <header>
+        <span id="app_name">Polling App</span>
+        
+        <div id="profile" onclick="toggle_profile_options(event)">
+            <span id="first_alpha">{{ request.user }}</span>
+
+            <div id="profile_options" class="hidden">
+                <div class="option">Create Poll</div>
+                <div class="option">Your Polls</div>
+                <div class="option">Your Votes</div>
+                <div class="option">Settings</div>
+                <div class="option">Log Out</div>
+            </div>
+
+        </div>
+    </header>
+    
+    <h2 id="sub_header">Public Polls</h2>
+
     {% if latest_questions_list %}
 
+
+        <div id="main_container">
+            {% for question in latest_questions_list %}
+
+                <div class="question_container">
+                    <div class="question_header">
+                        <span>{{ question.question_text }}</span>
+                        <div class="right_section">
+                            <div class="question_meta">
+                                <span>
+                                    <span>{{ question.total_votes }}</span>
+                                    Votes
+                                </span>
+
+                                <span>Results in 
+                                    <span>1 hour</span>
+                                </span>
+                            </div>
+                            
+                            <img src="{% static 'polls/arrow-up-right-from-square-solid.svg' %}">
+        
+                        </div>
+                    </div>
+                    <div class="form_container">
+                        <div class="choices">
+                            
+                            {% for choice in question.choice_set.all  %}
+                                <div class="choice">
+                                    <span>
+                                        <span>{{ forloop.counter|add:"64"|stringformat:"c" }}</span>
+                                        <span> -</span>
+                                    </span>
+                                    <span class="choice_text">{{ choice.choice_text }}</span>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <button class="vote_btn">Vote</button>
+                        
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+
+        
+    {% else %}
+        <p>No questions yet</p>
+    {% endif %}
+    <!-- {% if latest_questions_list %}
+
         <div class="questions" >
             {% for question in latest_questions_list %}
             
@@ -21,7 +88,7 @@
         
     {% else %}
         <p>No questions yet</p>
-    {% endif %}
-
+    {% endif %} -->
+<script src="{% static 'polls/header.js' %}"></script>
 </body>
 </html>

polls/templates/polls/login.html

@@ -2,7 +2,7 @@
     <head>
         {% load static %}
         <link rel="stylesheet" type="text/css" href="{% static 'polls/login.css' %}">
-        <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+        {% include 'polls/font.html' %}
         <title>Login page</title>
     </head>
     <body>

polls/templates/polls/signup.html

@@ -2,7 +2,7 @@
     <head>
         {% load static %}
         <link rel="stylesheet" type="text/css" href="{% static 'polls/signup.css' %}">
-        <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+        {% include 'polls/font.html' %}
         <title>Signup page</title>
     </head>
     <body>