User Listing

Developer
Derek Wheelden
Size
5,274 Kb
Views
28,336
  1. User Listing Previews
  2. User Listing HTML Codes
  3. User Listing CSS Codes

How do I make an user listing?

A little design for a web chat app I'm working on.. What is a user listing? How do you make a user listing? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

User Listing Previews
IQ Test

User Listing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>User Listing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
.main-container { width: 70%; height: 100%; background: #0088cc; float: left;
}
.user-container { width: 30%; height: 100%; background: #1a4d66; color: white; float: right; overflow-y: auto; cursor: default;
}
.user-container > i { padding: 0.5em; visibility: hidden;
}
@media (max-width: 1300px) { .main-container { width: 100%; float: none; } .user-container { position: absolute; top: 0; right: 0; width: 25em; float: none; transition: transform 0.5s; transform: translateX(calc(100% - 2em)); } .user-container:hover { transform: translateX(0); } .user-container > i { visibility: visible; }
}
.users { margin: 0; padding: 0; list-style: none; line-height: 3;
}
.users li { padding: 0 3em;
}
.users li:nth-child(odd) { background: #1f5c7a;
}
.users li.is-current-user { color: #66ccff;
}
.users li.is-active .users__user--status i { color: #7eeb47;
}
.users li.is-idle .users__user--status i { color: #ebcf47;
}
.users li.is-offline .users__user--status i { color: #eb4747;
}
.users li.is-offline .users__user--name { opacity: 0.5;
}
.users li.is-offline .users__user--interactions i.fa-comment { opacity: 0.2; cursor: default;
}
.users li.is-offline .users__user--interactions i.fa-comment:hover:after { display: none;
}
.users__user--status { padding-right: 1em; font-size: 0.7em; line-height: 4.3; float: left;
}
.users__user--name { float: left;
}
.users__user--interactions { float: right;
}
.users__user--interactions i { position: relative; margin-left: 0.5em; padding: 0.5em; cursor: pointer;
}
li.is-current-user .users__user--interactions { visibility: hidden;
}
i.fa-envelope:hover:after, i.fa-comment:hover:after { content: 'Send Email'; display: inline-block; position: absolute; top: 50%; right: 100%; padding: 0.5em; border-radius: 0.25em; background: white; font-size: 0.7em; font-family: 'Lato'; font-weight: 700; text-transform: lowercase; white-space: nowrap; color: #004466; z-index: 100; transform: translateY(-50%);
}
i.fa-comment:hover:after { content: 'Private Message';
}
i.disabled { opacity: 0.3; cursor: default;
}
i.disabled:hover:after { display: none;
}
/** PAGE STYLES **/
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5; font-weight: 300; overflow-x: hidden; -webkit-backface-visibility: hidden;
}
p { color: white; text-align: center;
}
h1 { margin: 0; padding: 0.75em 0 0; font-family: 'Oswald', sans-serif; font-size: 4em; text-transform: uppercase; text-align: center; color: white;
}
h3 { margin: 0 0 0.5em; font-size: 1.5em; font-weight: 300; color: #33bbff;
}
.user-container h3 { padding: 1em 2em 0;
}
.cf:before, .users li:before,
.cf:after,
.users li:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .users li:after { clear: both;
}
.cf, .users li { *zoom: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main-container"> <h1>User Listing Panel</h1> <p>It&rsquo;s over there on the right. It&rsquo;s responsive too.</p>
</div>
<div class="user-container"> <i class="fa fa-users"></i> <h3>Connected</h3>
<ul class="users"> <li class="is-active"> <div class="users__user--status"><i class="fa fa-circle"></i></div> <div class="users__user--name">Sherriff B.</div> <div class="users__user--interactions"> <i class="fa fa-envelope"></i> <i class="fa fa-comment"></i> </div> </li> <li class="is-active"> <div class="users__user--status"><i class="fa fa-circle"></i></div> <div class="users__user--name">Waco K.</div> <div class="users__user--interactions"> <i class="fa fa-envelope"></i> <i class="fa fa-comment"></i> </div> </li> <li class="is-current-user is-idle"> <div class="users__user--status"><i class="fa fa-circle"></i></div> <div class="users__user--name">Hedley L.</div> <div class="users__user--interactions"> <i class="fa fa-envelope"></i> <i class="fa fa-comment"></i> </div> </li> <li class="is-active"> <div class="users__user--status"><i class="fa fa-circle"></i></div> <div class="users__user--name">Lili V.S.</div> <div class="users__user--interactions"> <i class="fa fa-envelope"></i> <i class="fa fa-comment"></i> </div> </li> <li class="is-offline"> <div class="users__user--status"><i class="fa fa-circle"></i></div> <div class="users__user--name">William J.L.P.</div> <div class="users__user--interactions"> <i class="fa fa-envelope"></i> <i class="fa fa-comment"></i> </div> </li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

User Listing - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
.main-container { width: 70%; height: 100%; background: #0088cc; float: left;
}
.user-container { width: 30%; height: 100%; background: #1a4d66; color: white; float: right; overflow-y: auto; cursor: default;
}
.user-container > i { padding: 0.5em; visibility: hidden;
}
@media (max-width: 1300px) { .main-container { width: 100%; float: none; } .user-container { position: absolute; top: 0; right: 0; width: 25em; float: none; transition: transform 0.5s; transform: translateX(calc(100% - 2em)); } .user-container:hover { transform: translateX(0); } .user-container > i { visibility: visible; }
}
.users { margin: 0; padding: 0; list-style: none; line-height: 3;
}
.users li { padding: 0 3em;
}
.users li:nth-child(odd) { background: #1f5c7a;
}
.users li.is-current-user { color: #66ccff;
}
.users li.is-active .users__user--status i { color: #7eeb47;
}
.users li.is-idle .users__user--status i { color: #ebcf47;
}
.users li.is-offline .users__user--status i { color: #eb4747;
}
.users li.is-offline .users__user--name { opacity: 0.5;
}
.users li.is-offline .users__user--interactions i.fa-comment { opacity: 0.2; cursor: default;
}
.users li.is-offline .users__user--interactions i.fa-comment:hover:after { display: none;
}
.users__user--status { padding-right: 1em; font-size: 0.7em; line-height: 4.3; float: left;
}
.users__user--name { float: left;
}
.users__user--interactions { float: right;
}
.users__user--interactions i { position: relative; margin-left: 0.5em; padding: 0.5em; cursor: pointer;
}
li.is-current-user .users__user--interactions { visibility: hidden;
}
i.fa-envelope:hover:after, i.fa-comment:hover:after { content: 'Send Email'; display: inline-block; position: absolute; top: 50%; right: 100%; padding: 0.5em; border-radius: 0.25em; background: white; font-size: 0.7em; font-family: 'Lato'; font-weight: 700; text-transform: lowercase; white-space: nowrap; color: #004466; z-index: 100; transform: translateY(-50%);
}
i.fa-comment:hover:after { content: 'Private Message';
}
i.disabled { opacity: 0.3; cursor: default;
}
i.disabled:hover:after { display: none;
}
/** PAGE STYLES **/
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5; font-weight: 300; overflow-x: hidden; -webkit-backface-visibility: hidden;
}
p { color: white; text-align: center;
}
h1 { margin: 0; padding: 0.75em 0 0; font-family: 'Oswald', sans-serif; font-size: 4em; text-transform: uppercase; text-align: center; color: white;
}
h3 { margin: 0 0 0.5em; font-size: 1.5em; font-weight: 300; color: #33bbff;
}
.user-container h3 { padding: 1em 2em 0;
}
.cf:before, .users li:before,
.cf:after,
.users li:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .users li:after { clear: both;
}
.cf, .users li { *zoom: 1;
}
User Listing - Script Codes
User Listing - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 4.5
Size 5,274 Kb
Views 28,336
Do you need developer help for User Listing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Derek Wheelden (frxnz) Script Codes
Name
Dumb Triangle Thing
Blockquote Patterns
JavaScript Templates
Bouncing Border
Fantastic Mr. Fox
Google Maps Geolocation Test
Triangle Peeker
Tile Animation Thing
Pulsing Notification
A Pen by Derek Wheelden
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!