talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixing some flex stuff

Browse Source
This commit is contained in:
Arjun Patel
2022-01-11 00:56:21 -08:00
parent f2779a0c2e
commit 11c7718823
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/teams/demo.tsx
+27 -9
View File
@@ -1,7 +1,7 @@
import Head from 'next/head' import Head from 'next/head'
import Image from 'next/image'; import Image from 'next/image';
import React from 'react'; import React from 'react';
import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh, FaAngleDown, FaPlusSquare, FaBroom, FaBell } from "react-icons/fa"; import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh, FaAngleDown, FaPlusSquare, FaBroom, FaBell, FaFilePdf } from "react-icons/fa";
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5"; import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
import { BsThreeDots } from "react-icons/bs"; import { BsThreeDots } from "react-icons/bs";
@@ -164,7 +164,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
</span> </span>
</section> </section>
<div className='flex flex-row items-baseline space-x-5'> <div className='flex flex-row items-baseline space-x-5 space-y-5 flex-wrap'>
{/* personal line */} {/* personal line */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='pb-1 flex flex-col'> <span className='pb-1 flex flex-col'>
@@ -206,8 +206,6 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className={"text-xs span-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</span> <span className={"text-xs span-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</span>
</span> </span>
{this.renderPulse(friend.status)} {this.renderPulse(friend.status)}
</span> </span>
) )
@@ -215,14 +213,12 @@ export default class Demo extends React.Component<MyProps, MyState> {
} }
</section> </section>
<div className='flex flex-1 flex-col space-y-5 items-baseline'> <div className='flex grow flex-col space-y-5 items-baseline shrink-0'>
{/* announcements */} {/* announcements */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> <section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5'> <span className='flex flex-row justify-end space-x-2 pb-5'>
<span className="text-white mr-auto">ANNOUNCEMENTS</span> <span className="text-white mr-auto">ANNOUNCEMENTS</span>
<span className='text-sm text-gray-300 flex flex-row items-center'> <span className='text-sm text-gray-300 flex flex-row items-center'>
TODAY <FaAngleDown /> TODAY <FaAngleDown />
</span> </span>
@@ -250,7 +246,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
</section> </section>
{/* rooms */} {/* rooms */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> <section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'> <span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className="text-white mr-auto">ROOMS</span> <span className="text-white mr-auto">ROOMS</span>
@@ -299,8 +295,30 @@ export default class Demo extends React.Component<MyProps, MyState> {
</section> </section>
</div> </div>
{/* files */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className="text-white mr-auto">FILES</span>
</span>
<div className='flex flex-row'>
<div className='flex flex-row bg-white p-5 rounded-lg items-center justify-start'>
<FaFilePdf className='text-4xl text-orange-300' />
<span className="text-gray-400 text-sm">report.pdf</span>
<button className='p-2 text-mx'>
</button>
</div>
</div>
</section>
</div> </div>
</div> </div>
<div className='fixed bottom-10 w-full'> <div className='fixed bottom-10 w-full'>