From 973342f9744419be5a6f7a30b16a528a3755d3e5 Mon Sep 17 00:00:00 2001
From: Harshvardhan Singh <73544247+Lawful2002@users.noreply.github.com>
Date: Tue, 28 Mar 2023 12:18:04 +0530
Subject: [PATCH] (ac-4) - made ac-4 leave module responsive (#1154)

Co-authored-by: A Anunaya <76819712+Anunaya07@users.noreply.github.com>
Co-authored-by: Aksh Bansal <63552235+Aksh-Bansal-dev@users.noreply.github.com>
Co-authored-by: akshatnema <20bcs022@iiitdmj.ac.in>
Fix responsiveness (#1125)
---
 FusionIIIT/templates/globals/usercard.html  | 127 ++++++++++++--------
 FusionIIIT/templates/leaveModule/leave.html |   9 +-
 2 files changed, 86 insertions(+), 50 deletions(-)
 mode change 100755 => 100644 FusionIIIT/templates/globals/usercard.html

diff --git a/FusionIIIT/templates/globals/usercard.html b/FusionIIIT/templates/globals/usercard.html
old mode 100755
new mode 100644
index ecb758bd3..c04753bbb
--- a/FusionIIIT/templates/globals/usercard.html
+++ b/FusionIIIT/templates/globals/usercard.html
@@ -1,14 +1,40 @@
 {% load static %}
 
 {% block usercard %}
-
     {% comment %}
         TODO: Something!
     {% endcomment %}
+
     {% comment %}The Employee Image Card starts here!{% endcomment %}
-    <div class="ui large fluid raised card"
-         style="max-width: 320px;">
 
+    <style>
+        .name {
+            font-size: 24px;
+            padding: 0.25rem;
+        }
+        .dep {
+            padding: 0.25rem;
+        }
+        @media screen and (max-width: 1300px) {
+            .name {
+                font-size: 16px;
+            }
+            .dep {
+                font-size: 16px !important;
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            .name{
+                font-size: 20px;
+            }
+            .dep {
+                font-size: 20px !important;
+            }
+        }
+    </style>
+
+    <div class="ui large fluid raised card" style="max-width: 25rem;">
         <div class="image">
             <img src="{% static 'globals/img/zlatan.jpg' %}">
         </div>
@@ -18,61 +44,66 @@
                 TODO: Add a If-Else here!
             {% endcomment %}
             {% if user %}
-            <div class="ui large header" href="">
-                {{ user.first_name}}
-                {{ user.last_name}}
-                <span class="right floated meta">
-                    {{ user.extrainfo.department.name}}
-                    
-                </span>
-                <span class="left floated meta">
+                <div style="display:flex;flex-direction: column;justify-content:space-between;" class="ui large header">
+                    <div class="name">
+                        {{ user.first_name }}
+                        {{ user.last_name }}
+                    </div>
+                
+                    <div class="meta dep">
+                        {{ user.extrainfo.department.name }}
+                    </div>
+                </div>
+
+                <div class="ui large header">
                     {% if user.extrainfo.user_type == 'student' %}
-                    {{user.extrainfo.student.programme}}
-                    {{ user.extrainfo.student.batch}}
-                    <br/>
-                    Sem - {{user.extrainfo.student.curr_semester_no}}
+                        {{ user.extrainfo.student.programme }}
+                        {{ user.extrainfo.student.batch }}
+                        <br/>
+                        Sem - {{ user.extrainfo.student.curr_semester_no }}
                     {% endif %}
-                </span>
-                
-            </div>
+                </div>
             {% else %}
-            <div class="ui large header" href="">
-                {{ request.user.first_name}}
-                {{ request.user.last_name}}
-                <span class="right floated meta">
-                    {{ request.user.extrainfo.department.name}}
-                    <span class="right floated meta">
-                        {% if request.user.extrainfo.user_type == 'student' %}
-                        {{request.user.extrainfo.student.programme}}
-                        {{ request.user.extrainfo.student.batch}}
-                        <br/>
-                        Sem - {{request.user.extrainfo.student.curr_semester_no}}
+                <div style="display:flex;flex-wrap:wrap;justify-content:space-between;" class="ui large header">
+                    <div>
+                        {{ request.user.first_name }}
+                        {{ request.user.last_name }}
+                    </div>
+                    
+                    <div class="meta">
+                        {{ request.user.extrainfo.department.name }}
+                    </div>
+                </div>
+                
+                <div class="ui large header">
+                    {% if user.extrainfo.user_type == 'student' %}
+                        {{ request.user.extrainfo.student.programme }}
+                        {{ request.user.extrainfo.student.batch }}
                         <br/>
-                        {% endif %}
-                </span>
+                        Sem - {{ request.user.extrainfo.student.curr_semester_no }}
+                    {% endif %}
+                </div>
+                
                 <span class="right floated meta">
-                    {{user.extrainfo.student.programme}}
-                    {{ user.extrainfo.student.batch}}
-                    {{user.extrainfo.student.curr_semester_no}}
+                    {{ user.extrainfo.student.programme }}
+                    {{ user.extrainfo.student.batch }}
+                    {{ user.extrainfo.student.curr_semester_no }}
                 </span>
-            </div>
             {% endif %}
-            <br/>
-            <div class="meta">
+            <div class="ui large header">
                 {% for i in Curr_desig %}
-                <span> {% comment %}Should this be inside if else?{% endcomment %}
-                    {% if i == "co-ordinator" or  i == "co co-ordinator" %}
-                        {{ i }} of {{ club_details }} club
-                    {% else %}
-                        {{ i }}
-                    {% endif %}
-                </span>
-                <br>
+                    {% comment %} Should this be inside if else? {% endcomment %}
+                    <span class="meta" style="text-transform: uppercase;">
+                        {% if i == "co-ordinator" or i == "co co-ordinator" %}
+                            {{ i }} of {{ club_details }} club
+                        {% else %}
+                            {{ i }}
+                        {% endif %}
+                    </span>
+                    <br>
                 {% endfor %}
             </div>
         </div>
     </div>
-    {% comment %}The Employee Image Card ends here!{% endcomment %}
-
-
+    {% comment %} The Employee Image Card ends here! {% endcomment %}
 {% endblock %}
diff --git a/FusionIIIT/templates/leaveModule/leave.html b/FusionIIIT/templates/leaveModule/leave.html
index 86f97c2ed..f9d01befb 100755
--- a/FusionIIIT/templates/leaveModule/leave.html
+++ b/FusionIIIT/templates/leaveModule/leave.html
@@ -112,6 +112,11 @@ <h4 class="ui dividing header">Please Add a remark</h4>
     </div>
 
 
+    <style>
+        .ui.stackable.doubling.grid {
+            width: 100%;
+        }
+    </style>
 
     {% comment %}The grid starts here!{% endcomment %}
     <div class="ui stackable doubling grid">
@@ -120,7 +125,7 @@ <h4 class="ui dividing header">Please Add a remark</h4>
         <div class="column"></div>
 
         {% comment %}The left-rail segment starts here!{% endcomment %}
-        <div class="three wide column">
+        <div class="four wide column">
 
             {% comment %}ROW #1 starts here!{% endcomment %}
             <div class="row">
@@ -172,7 +177,7 @@ <h4 class="ui dividing header">Please Add a remark</h4>
         {% comment %}The left-rail segment endss here!{% endcomment %}
 
         {% comment %}The central-rail segment starts here!{% endcomment %}
-        <div class="eight wide column">
+        <div class="ten wide column">
             <div class="row">
 
                 {% comment %}The Leave Application Form starts here!{% endcomment %}