Merge branch 'main' into change#230/banner-organizacao-card-usuario

universi-me · Nov 11, 2023 · 0779d9d · 0779d9d
2 parents e0a7bcf + 2a5fdb4
commit 0779d9d
Show file tree

Hide file tree

Showing 20 changed files with 123 additions and 60 deletions.
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.less b/src/components/ProfileInfo/ProfileBio/ProfileBio.less
@@ -7,7 +7,6 @@
     border-radius: 10px !important;
     margin-bottom: 30px !important;
     width: 100%;
-    height: fit-content;
 
     .edit-button {
         display: flex;
@@ -51,11 +50,13 @@
         padding: 0  !important;
         margin-top: -3em;
         margin-bottom: 1rem;
+
+        font-size: 0.8rem;
     }
 
     .profile-header{
         width: 100%;
-        height: 100px;
+        height: 5rem;
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;

diff --git a/src/components/ProfileInfo/ProfileGroups/ProfileGroups.less b/src/components/ProfileInfo/ProfileGroups/ProfileGroups.less
@@ -11,11 +11,12 @@
 
     .groups-name {
         text-align: center;
-        padding: 20px 20px;
+        padding: 1rem;
         background-color: var(--primary-color);
         color: white;
         font-weight: 300;
         margin-bottom: 20px;
+        font-size: 1.5rem;
     }
 
     .items-wrapper {

diff --git a/src/components/UniversiHeader/index.tsx b/src/components/UniversiHeader/index.tsx
@@ -1,5 +1,4 @@
 import { Link } from "react-router-dom";
-import { SearchInput } from "./components/SearchInput";
 import { WelcomeUser } from "./components/WelcomeUser/WelcomeUser";
 import { LoginButton } from "./components/LoginButton/LoginButton";
 import "./styles.less";

diff --git a/src/components/VideoPopup/VideoPopup.css b/src/components/VideoPopup/VideoPopup.css
@@ -17,6 +17,9 @@
     aspect-ratio: 16/9;
     border-radius: 10px;
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .close{
@@ -27,11 +30,12 @@
     color: var(--background-color);
     text-align: end;
     margin-bottom: 1rem;
+    align-self: end;
 }
 
 .mini-player{
     position: fixed;
-    left: 3.5rem;
+    left: 5%;
     top: 70%;
     width: 20rem;
     border-radius: 10px;
@@ -46,6 +50,9 @@
     overflow: hidden;
     margin: 0px;
     padding: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     .close{
         position: static;
         text-align: end;
@@ -58,6 +65,7 @@
         color: white;
         overflow: hidden;
         margin: 0px;
+        align-self: end;
     }
 
     @media screen and (max-height: 800px) {
@@ -82,14 +90,14 @@ iframe{
     background-color: var(--background-color);
     color: var(--primary-color);
     text-align: center;
-    margin-left: 50%;
-    transform: translate(-50%, 0);
-    display: inline-flex;
     padding: 5px 10px;
     border-radius: 10px;
     margin-top: 1rem;
     cursor: pointer;
     transition: 0.2s linear;
+    i{
+        width: auto;
+    }
 }
 
 .watched-button:hover{

diff --git a/src/contexts/Auth/AuthProvider.tsx b/src/contexts/Auth/AuthProvider.tsx
@@ -63,7 +63,11 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         setFinishedLogin(false);
         const profile = await getLoggedProfile();
         setProfile(profile);
-        updateOrganization();
+
+        if (profile)
+            updateOrganization();
+        else
+            setOrganization(null);
 
         setFinishedLogin(true);
         return profile;

diff --git a/src/layouts/global.less b/src/layouts/global.less
@@ -2,6 +2,7 @@
 @import url(./fonts.less);
 @import url(./body.less);
 @import url(./transitions.less);
+@import url(./spacing.less);
 
 /* Default settings */
 * {

diff --git a/src/layouts/spacing.less b/src/layouts/spacing.less
@@ -0,0 +1,9 @@
+@top-page-margin: 4rem;
+@left-page-padding: 5%;
+
+:root{
+
+    --top-page-margin:   @top-page-margin;
+    --left-page-padding: @left-page-padding;
+
+}
diff --git a/src/pages/Group/Group.less b/src/pages/Group/Group.less
@@ -2,9 +2,26 @@
     width: 100%;
 
     display: grid;
-    grid-template-columns: 20rem auto;
-    column-gap: 2rem;
+    grid-template-columns: 15% 85%;
+    column-gap: 2%;
 
-    padding: 0 3.5rem;
-    margin-top: 2rem;
+    padding: 0 var(--left-page-padding);
+
+    margin-top: var(--top-page-margin);
+
+    max-width: 1920px;
+}
+
+.group-page-container{
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+
+
+#intro-tabs-wrapper{
+    width: 100%;
 }
diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
@@ -23,15 +23,17 @@ export function GroupPage() {
 
     return (
         <GroupContext.Provider value={context}>
-        <div id="group-page">
-            <div>
-                <ProfileBio profile={context.loggedData.profile} links={context.loggedData.links} organization={authContext.organization} />
-                <ProfileGroups groups={context.loggedData.groups} />
-            </div>
-            <div id="intro-tabs-wrapper">
-                <GroupIntro />
-                <GroupTabs changeTab={changeTab} currentTab={currentTab} />
-                <GroupTabRenderer tab={currentTab} />
+        <div className="group-page-container">
+            <div id="group-page">
+                <div>
+                    <ProfileBio profile={context.loggedData.profile} links={context.loggedData.links} organization={authContext.organization} />
+                    <ProfileGroups groups={context.loggedData.groups} />
+                </div>
+                <div id="intro-tabs-wrapper">
+                    <GroupIntro />
+                    <GroupTabs changeTab={changeTab} currentTab={currentTab} />
+                    <GroupTabRenderer tab={currentTab} />
+                </div>
             </div>
         </div>
         </GroupContext.Provider>

diff --git a/src/pages/Group/GroupIntro/GroupIntro.less b/src/pages/Group/GroupIntro/GroupIntro.less
@@ -6,7 +6,7 @@
     align-items: center;
 
     #banner-wrapper {
-        height: 17.3rem;
+        height: 14rem;
         width: 100%;
 
         #organization-banner {

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less
@@ -8,6 +8,8 @@
     .title-hyperlink{
         color: inherit;
     }
+
+
     .material-list {
         .fullscreen-video{
             top: 50%;
@@ -26,8 +28,7 @@
             display: flex;
             flex-direction: row;
             justify-content: center;
-            width: 7rem;
-            margin-left: 2rem;
+            margin-left: 1rem;
         }
         .material-item {
             display: flex;
@@ -37,7 +38,7 @@
             height: fit-content;
             width: 100%;
             border: solid 1px var(--primary-color);
-            padding: 2rem 0rem;
+            padding: 1rem 0rem;
             border-radius: 10px;
             flex-flow: row;
 

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx
@@ -35,9 +35,11 @@ export function GroupContentMaterials() {
 
     return (
         <section id="materials" className="group-tab">
-            <div className="heading">
-                <i className="bi bi-list-ul tab-icon"/>
-                <h2 className="title">{organizationName}{groupName} &gt; {groupContext.currentContent.name}</h2>
+            <div className="heading top-container">
+                <div className="title-container">
+                    <i className="bi bi-list-ul tab-icon"/>
+                    <h2 className="title">{organizationName}{groupName} &gt; {groupContext.currentContent.name}</h2>
+                </div>
                 <div className="go-right">
                     <div id="filter-wrapper">
                         <i className="bi bi-search filter-icon"/>

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.less b/src/pages/Group/GroupTabs/GroupContents/GroupContents.less
@@ -8,6 +8,15 @@
     flex-wrap: wrap;
 }
 
+.title-container{
+    display: flex;
+    flex-direction: row;
+}
+
+.top-container{
+    display: block !important;
+}
+
 
 #group-page #contents {
     .content-list {

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx
@@ -21,9 +21,11 @@ export function GroupContents() {
 
     return (
         <section id="contents" className="group-tab">
-            <div className="heading">
-                <i className="bi bi-list-ul tab-icon"/>
-                <h2 className="title">Conteúdos {groupContext.group.name}</h2>
+            <div className="heading top-container">
+                <div className="title-container">
+                    <i className="bi bi-list-ul tab-icon"/>
+                    <h2 className="title">Conteúdos {groupContext.group.name}</h2>
+                </div>
                 <div className="go-right">
                     <div id="filter-wrapper">
                         <i className="bi bi-search filter-icon"/>

diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
@@ -17,9 +17,11 @@ export function GroupGroups() {
 
     return (
         <section id="groups" className="group-tab">
-            <div className="heading">
-                <i className="bi bi-building-fill-gear tab-icon"/>
-                <h2 className="title">Grupos em {groupContext.group.name}</h2>
+            <div className="heading top-container">
+                <div className="title-container">
+                    <i className="bi bi-building-fill-gear tab-icon"/>
+                    <h2 className="title">Grupos em {groupContext.group.name}</h2>
+                </div>
                 <div className="go-right">
                     <div id="filter-wrapper">
                         <i className="bi bi-search filter-icon"/>

diff --git a/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.tsx b/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.tsx
@@ -18,9 +18,11 @@ export function GroupPeople() {
 
     return (
         <section id="people" className="group-tab">
-            <div className="heading">
-                <i className="bi bi-people-fill tab-icon"/>
-                <h2 className="title">Participantes de {groupContext.group.name}</h2>
+            <div className="heading top-container">
+                <div className="title-container">
+                    <i className="bi bi-people-fill tab-icon"/>
+                    <h2 className="title">Participantes de {groupContext.group.name}</h2>
+                </div>
                 <div className="go-right">
                     <div id="filter-wrapper">
                         <i className="bi bi-search filter-icon"/>

diff --git a/src/pages/Group/GroupTabs/GroupTabs.less b/src/pages/Group/GroupTabs/GroupTabs.less
@@ -9,6 +9,8 @@
     border-radius: 0 0 1rem 1rem;
     margin-top: 1px;
 
+    height: 3rem;
+
     .group-tab-button {
         background: none;
         border: none;
@@ -68,8 +70,8 @@
         }
 
         .go-right {
-            margin-left: auto;
-            width: fit-content;
+
+            margin-top: 1rem;
 
             #filter-wrapper {
                 border-radius: .5rem;

diff --git a/src/pages/Profile/Profile.css b/src/pages/Profile/Profile.css
@@ -14,11 +14,11 @@
 }
 
 #profile-page .content {
-    padding: 0 3.5rem;
-    margin-top: 2rem;
+    padding: 0 var(--left-page-padding);
+    margin-top: var(--top-page-margin);
 
     display: grid;
-    grid-template-columns: 20rem auto;
+    grid-template-columns: 15rem auto;
 }
 
 #profile-page #left-side {

diff --git a/src/pages/singin/signin.css b/src/pages/singin/signin.css
@@ -18,7 +18,7 @@
 
 .logo h1 {
     width: 500px;
-    font-size: 50px;
+    font-size: 3.4rem;
     font-weight: 600;
     text-align: 10px;
     color: var(--font-color-v2);