userProfile-sl

by kontrax

HTML

<div id="preview"></div><hr>

<main id="profile-root">
  <section id="profile-controls">
    <div><!-- <img src="https://lorempixel.com/200/200/people/1" alt=""> --></div>
		<nav>
      <a href="#info"    class="menu-item">User info</a>
      <a href="#slides"  class="menu-item">Presentations</a>
      <a href="#setting" class="menu-item">Setting</a>
		</nav>
  </section>

  <section id="page-info" class="page">
    <header><h1>Info</h1></header>
    <div><!-- CONTENT -->
    <!--TODO: Hva skal stå på infosiden? Lastlogin-->
    </div><!-- CONTENT - END -->
  </section>

  <section id="page-slides" class="page">
    <header><h1>Slides</h1></header>
    <div><!-- CONTENT -->
      <div class="item"><!-- TEMPLATE -->
        <!--<img src="" alt="">-->
        <i class="fa fa-address-book-o ic ic-50" aria-hidden="true"></i>
        <div>slide title</div>
      </div><!-- TEMPLATE - END -->
    </div><!-- CONTENT - END -->
  </section>

  <section id="page-setting" class="page">
    <header><h1>Settings</h1></header>
    <div><!-- CONTENT -->
      <form>
        <label> Change first name
        <input id="firstname" type="text" /></label>
        <label> Change last name:
        <input id="lastname"  type="text" /></label>
        <label> Username:
        <input id="username"  type="text"  disabled value="asdasd" /></label>
        <label> Email:
        <input id="email"     type="email" disabled value="[email protected]" /></label>

        <img src="" alt=""> <!-- TODO: Gamle profilbilde skal være synlig -->
        <label> Change image:
        <input id="image"     type="file" /></label>

        <button type="button">Save changes</button>
      </form>
      <hr>
      <form>
        <label> Type in old password:
        <input id="password_old" type="password" /></label>
        <label> Type in new password:
        <input id="password_new" type="password" /></label>
        <label> Repeat new password:
        <input id="password_new_repeat" type="password"...

CSS

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#page-slides { display: block; }
/*
const data = {
	author:  'Ola Nordmann',
	name:    'Exercise 5',
	created: 1511207706442,
	pages:   [
		{body: 'page content'},
		{body: 'page content'}
	]
}
listElm
eList


last login
stats:
  created slides
  



-                         | W  | R
username   = locked       | na | 2
password   = changeable   | 1  | na
firstName  = changeable ? | 2  | 2
lastName   = changeable ? | 2  | 2
mail       = locked       | na | 
profileImg = changeable   | 2  | 2

lastLogin

presentations

*/

#preview *
{
  outline: 1px solid red;
}

#profile-root {
  display: flex;
  flex-flow: row nowrap;
}

.page {
  display: none;
}

.page.page-visible {
  display: block;
}

.menu-item {
  display: block;
  margin: 0;
  padding: 2px 5px;

  border: 1px solid black;

  color: #FFF;
  line-height: 2;
  text-decoration: none;
}

nav {
  margin: 0px 6px;
}

.menu-item.menu-item-current {
  color: #000;
}

.page {
  margin: 0;
  padding: 2px 5px;

  border: 1px solid black;
}

/*
<i class="fa fa-address-book-o ic ic-50" aria-hidden="true"></i>
<i class="fa fa-address-book-o ic ic-100" aria-hidden="true"></i>
<i class="fa fa-address-book-o ic ic-200" aria-hidden="true"></i>
*/

.page input {
  display: block;
}

.ic {
	display: inline-block;
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	outline: 1px solid black;
}
.ic-50 {
	width:   50px;
	height:  50px;
}
.ic-100 {
	width:   100px;
	height:  100px;
}
.ic-200 {
	width:   200px;
	height:  200px;
}

/*
{
	username:      "usr123",
	password:      "sfoidfu3453oeriuf234",
	firstName:     "Vegard",
	lastName:      "Schau",
	mail:          "[email protected]",
	profileImg:    "path_on_serv/img.jpg",
	lastLogin:     "34598374958734",
	presentations: [pres_object, pres_object]
}
*/
/*
<!-- slides.com-inspirert layout
	Forfattere:
	- Vegard
	- Silje U.
-->
<!DOCTYPE html>
<html lang="no">

<head>
	<meta...

JavaScript

// <div class="item">
//   <img class="" />
//   <div>slide title</div>
// </div>

function createSlideItem (data, itemClass = 'item')
{
	const {
    name,
    created,
  } = data;
  
  const eItem = document.createElement("div");
  eItem.classList.add(itemClass);

  //const image = document.createElement("img");
  const eImage = createIcon();
  eItem.appendChild(eImage);

  const eTitle = document.createElement("div");
  eTitle.innerHTML = name;
  eItem.appendChild(eTitle);
  
  const eCreated = document.createElement("time");
  const date = new Date(created);
  eCreated.dateTime  = date.toISOString();
  eCreated.innerHTML = date.toLocaleDateString("nb-NO");
  //eCreated.innerHTML = created;
  eItem.appendChild(eCreated);
  
  return eItem;
}







//==============================================================================
const root = document.getElementById('preview')
root.appendChild(createSlideItem(data()))
root.appendChild(createSlideItem(data()))
root.appendChild(createSlideItem(data()))

function createIcon () {
	const icon = document.createElement('i')
	icon.classList.add(...['fa', 'fa-address-book-o', 'ic', 'ic-50'])
	return icon
}

function data () { return {
	author:  'Ola Nordmann',
	name:    'Exercise 5',
	created: 1511207706442,
	pages:   [
		{body: 'page content'},
		{body: 'page content'}
	]
}}