From cd93dcb7194886ea1439b37e46be44da5c4297fc Mon Sep 17 00:00:00 2001 From: Kevin Nobel Date: Wed, 11 Jan 2017 14:00:10 +0100 Subject: [PATCH] Small changes to profile page, added friend request button --- website/img/add-friend.png | Bin 0 -> 676 bytes website/profile.php | 18 ++++++++ website/styles/main.css | 4 +- website/styles/profile.css | 22 ++++++++-- website/views/profile.php | 82 +++++++++++++++++++++++++++---------- 5 files changed, 99 insertions(+), 27 deletions(-) create mode 100644 website/img/add-friend.png create mode 100644 website/profile.php diff --git a/website/img/add-friend.png b/website/img/add-friend.png new file mode 100644 index 0000000000000000000000000000000000000000..87d1d4431c08c20f46133c245b92f6c7c2c9583f GIT binary patch literal 676 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_*1mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VW5Sk5Uj7}P}D}aLRC7!;n><<~ac?~4&<3Ao?U|=lrba4!^INdwxtaeMH$kFpY zKKo9kr712I5EJQ4T0Nz;^{7VVEzSA{oi|4h9g|l`$#m6}o^8l2zck!Oq}6Ciz$eSk zn?KB|ocBES%*{RTcYdE&ZMEHfl8WIOxk6F?zJ|X^YKQ-A4+?TE-2FIb@)O<)#gk^r z|2fxfD4hQKNW_B)(q@vTtdo~iDsZP%JeZcb|K7>H8`D}Rye(#&BeADv%43^6?sE+1 zA2jdqxEUUGWqDXHuVL!k4Za~a<(^J*VJ>9r@GL3JwA>?9_&)S>+x;^J?vlASQcW$^ zaVJ-9EsRXkI=<=4?xvXzXY5v0e*Mq?QZ0v@kEtn=^ZWyAlc(!dOxffdyO&5ef6wS% zwdVjghmGgku%&*ND-Z6H_L4TyeiichqNbvtN5J8AlVAT$-!nb+QrPR3%0(^_n^(WY7Gp0cwy0*$|wcR#Ki=l*&+EUaps!mtCBk aSdglhUz9%kosASw5re0zpUXO@geCwvC;-y{ literal 0 HcmV?d00001 diff --git a/website/profile.php b/website/profile.php new file mode 100644 index 0000000..0ecdda1 --- /dev/null +++ b/website/profile.php @@ -0,0 +1,18 @@ + + + + + + + diff --git a/website/styles/main.css b/website/styles/main.css index c44b249..a410cdf 100644 --- a/website/styles/main.css +++ b/website/styles/main.css @@ -20,8 +20,8 @@ body { } .content { - margin-top: 80px; - margin-left: 256px; + margin: 80px 0 20px 256px; + padding: 20px; } ::selection { diff --git a/website/styles/profile.css b/website/styles/profile.css index a65408b..da4cc64 100644 --- a/website/styles/profile.css +++ b/website/styles/profile.css @@ -1,4 +1,6 @@ - +.profile-box, .item-box, .post-box { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} .profile-box { min-height: 150px; @@ -23,8 +25,9 @@ background-color: #FFFFFF; } -.item-box .profile-picture { - width: 25px; +.posts { + background-color: red; + margin-top: 20px; } .post-box { @@ -43,4 +46,17 @@ float: right; color: #aaaaaa; font-size: 0.8em; +} + +.friend-request { + float: right; + padding: 10px; + border-radius: 3px; + background-color: #845663; + color: #FFFFFF; + transition-duration: 250ms; +} + +.friend-request:hover { + background-color: #B78996; } \ No newline at end of file diff --git a/website/views/profile.php b/website/views/profile.php index 1d4070a..408f93a 100644 --- a/website/views/profile.php +++ b/website/views/profile.php @@ -1,6 +1,9 @@
+
+

Als vriend toevoegen

+

[gebruikersnaam]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

@@ -29,32 +32,67 @@

-
-

Tekst

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

- -
+
+
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
-
-

Afbeelding

- Foto van [gebruikersnaam] - -
+
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
-
-

Video

- -
+
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
-
-

Post

- -
+
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.

+ +
-
-

Post

+
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
+ +
+

Tekst

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
+ +
+

Tekst

+

Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.

+ +
+ +
+

Afbeelding

+ Foto van [gebruikersnaam] + +
+ +
+

Post

+ + +
+ +
+

Post

+ +
\ No newline at end of file