LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Users (0)
Add user
Name Username E-mail Country
CSS
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html {
  color: #012;
  font-size: 16px;
  font-family: "Open Sans", "Helvetica Neue", Tahoma, sans-serif;
}

body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/Blur-4.jpg");
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

.page {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 4%;
  bottom: 4%;
  background-color: rgba(255, 255, 255, 0.4);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  overflow: hidden;
}

.content .dataTable table thead tr th {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.content {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.content .header {
  -webkit-flex: 0 0 36px;
  flex: 0 0 36px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.2);
}
.content .header .title {
  float: left;
  font-size: 0.8rem;
}
.content .header .title .name {
  font-size: 1.3rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.content .header .functions {
  float: right;
  padding-right: 10px;
}
.content .header .functions .add {
  cursor: pointer;
  opacity: 0.6;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.content .header .functions .add .icon {
  display: inline-block;
  border: 2px solid #012;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  text-align: center;
  padding: 1px 0 0 0;
  font-size: 1.1rem;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.content .header .functions .add span {
  overflow: hidden;
  display: inline-block;
  margin-left: 5px;
  font-size: 0.8rem;
  width: 0px;
  font-weight: 600;
  white-space: nowrap;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.content .header .functions .add:hover {
  opacity: 1.0;
}
.content .header .functions .add:hover span {
  width: 60px;
}
.content .header .functions .add:hover .icon {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.content .dataTable {
  -webkit-flex: 1;
  flex: 1;
  padding: 10px;
  font-size: 0.9rem;
  overflow: auto;
}
.content .dataTable table {
  width: 100%;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.content .dataTable table thead tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.content .dataTable table thead tr th {
  text-align: left;
  font-weight: 700;
  padding: 4px 2px;
  vertical-align: middle;
  text-transform: uppercase;
}
.content .dataTable table thead tr th.selectAll {
  font-size: 1.1rem;
  vertical-align: middle;
  padding-right: 2px;
}
.content .dataTable table thead tr th.selectAll.selected i:before {
  content: "\f046";
}
.content .dataTable table tbody tr {
  cursor: pointer;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.content .dataTable table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
.content .dataTable table tbody tr td {
  padding: 8px 2px;
}
.content .dataTable table tbody tr td:nth-child(1) .checkbox {
  font-size: 1.1rem;
  vertical-align: middle;
  width: 18px;
}
.content .dataTable table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.content .dataTable table tbody tr.selected {
  color: #000;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
.content .dataTable table tbody tr.selected td:nth-child(1) .checkbox:before {
  content: "\f046";
}
.content .dataTable table tbody tr.inactive {
  font-style: italic;
  color: rgba(0, 17, 34, 0.5);
}
.content .dataTable table tbody tr.marked td:nth-child(2):after {
  content: 'marked';
  font-size: 0.6rem;
  background-color: rgba(0, 92, 126, 0.17);
  border: 1px solid rgba(0, 92, 126, 0.4);
  color: White;
  padding: 1px 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: top;
}

.properties {
  -webkit-flex: 0 0 23rem;
  flex: 0 0 23rem;
  order: 1;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.properties .slider {
  -webkit-flex: 0 0 3px;
  flex: 0 0 3px;
  width: 3px;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: col-resize;
  -moz-transition: background-color 0.3s linear;
  -o-transition: background-color 0.3s linear;
  -webkit-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
}
.properties .slider:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.properties .propertyEditor {
  -webkit-flex: 1;
  flex: 1;
  overflow: auto;
  background-color: transparent;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  color: #012;
}
.properties .propertyEditor table thead {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.properties .propertyEditor table tr td {
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.properties .propertyEditor table tr th {
  padding: 8px 10px 9px 10px;
  font-size: 1.1rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.properties .propertyEditor table tr td:nth-child(2) .hint {
  color: #6E6E6E;
}
.properties .propertyEditor table tr td:nth-child(2) input:not([type="checkbox"]), .properties .propertyEditor table tr td:nth-child(2) textarea, .properties .propertyEditor table tr td:nth-child(2) select, .properties .propertyEditor table tr td:nth-child(2) .checklist, .properties .propertyEditor table tr td:nth-child(2) .droplist {
  background-color: rgba(255, 255, 255, 0.4);
  color: #012;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.properties .propertyEditor table tr td:nth-child(2) button.function {
  background-color: rgba(68, 68, 68, 0.5);
}
.properties .propertyEditor table tr td:nth-child(2) button.function:hover {
  background-color: rgba(68, 68, 68, 0.7);
}
.properties .propertyEditor table tr.validation-error .errors, .properties .propertyEditor table tr.validation-error td:nth-child(1) {
  color: #C70000;
}

@media (max-width: 1200px) {
  .dataTable th:nth-child(5), .dataTable td:nth-child(5) {
    display: none;
  }
}
@media (max-width: 1000px) {
  .dataTable th:nth-child(4), .dataTable td:nth-child(4) {
    display: none;
  }
}
@media (max-width: 900px) {
  .dataTable th:nth-child(3), .dataTable td:nth-child(3) {
    display: none;
  }
}
@media (max-width: 700px) {
  .page {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .properties {
    -webkit-flex: 0 0 31rem;
    flex: 0 0 31rem;
  }
}
.ghostSlider {
  position: absolute;
  width: 3px;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: col-resize;
  z-index: 9999;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 1ex;
  border: none;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
JS
pjs = null
selectedObjs = undefined

# Change selection event
changeSelection = () ->
	selectedRows = $(".dataTable table tbody tr.selected")
	if selectedRows.length > 0
		selectedObjs = ($(row).data("obj") for row in selectedRows)
		
	refreshEditor()

# Refresh editor
refreshEditor = ->
	pjs = new PJS ".propertyEditor", propertiesSchema, selectedObjs


dataSource = []

##################
# Generate users # 
##################
generateFakeUsers = () ->
	for i in [1..50]
		user = faker.helpers.createCard()
		user.bio = faker.lorem.sentence()
		user.marked = faker.helpers.randomize([false, false, false, false, false, true])
		user.status = faker.helpers.randomize([true, true, true, true, false])
		user.password = user.username
		dataSource.push user

#Create table row for item
initRow = (tr, item) ->	
		# Headerben lévő checkbox
		selectAllCell = $(".dataTable table thead th.selectAll")

		unless item.status
			tr.addClass("inactive") 
		else
			tr.removeClass("inactive") 

		if item.marked
			tr.addClass("marked") 
		else
			tr.removeClass("marked") 
			
		tr.empty().append [
			$("").append $("").addClass("checkbox fa fa-square-o")
			$("").text item.name || ""
			$("").text item.username || ""
			$("").text item.email || ""
			$("").text item.address?.country || ""
		]

		tr.find("td:eq(0)").on "click", (e)-> 
			e.preventDefault()
			checkbox = tr.find("input[type=checkbox]")
			state = tr.hasClass "selected"
			if state
				state = false					
			else
				state = true
				
			tr.toggleClass "selected"
			selectAllCell.removeClass "selected"	
			changeSelection()

		tr.find("td:not(:eq(0))").on "click", (e)-> 
			tr.addClass("selected").siblings().removeClass("selected") 
			selectAllCell.removeClass "selected"	
			changeSelection()
	
	
refreshDataCount = ->
	$(".header .count").text dataSource.length
	
##################
# Show datalist # 
##################
$ ->
	
	generateFakeUsers()
	
	# console.log Faker 
	thead = $(".dataTable table thead")
	tbody = $(".dataTable table tbody")
	rows = []
	
	selectAllCell = thead.find("th.selectAll")

	$.each dataSource, (i, item) ->
		tr = $("").attr("data-id", i).data("obj", item)
		initRow tr, item
		item.__row = tr
		rows.push tr

	tbody.append rows
	refreshDataCount()
	
	selectAllCell.on "click", (e)->
		if selectAllCell.hasClass "selected" 
			tbody.find("tr").removeClass "selected"
		else
			tbody.find("tr").addClass "selected"
			
		selectAllCell.toggleClass "selected"	
		changeSelection()

	# Set Add event handler
	$(".header .functions .add").on "click", ->
		selectedObjs = undefined
		$(".dataTable tr.selected").removeClass("selected")
		refreshEditor()
		obj = pjs.getObject()
		dataSource.push obj
		selectedObjs = [obj]
		refreshDataCount()
		
		tr = $("").data("obj", obj).addClass("selected")
		initRow tr, obj
		obj.__row = tr
		tbody.append tr
		
		$('.dataTable').stop().animate({
        scrollTop: $('.dataTable table').height()
    }, 500);		
		
		
	refreshEditor()



#################
# Handle slider #
#################

$doc = $(document)
dragging = false
ghost = null

$(".slider").on "mousedown", (e) ->
	e.preventDefault()
	
	dragging = true
	width = $(".page").width()
	offsetX = $(".page").offset().left
	
	ghost = $("
", class: "ghostSlider" css: left: $(".properties").offset().left - offsetX ).appendTo $(".page") $(".size").text(parseInt($(".properties").width()) + "px").fadeIn("fast") $doc.on "mousemove", (ev) -> dragging = true ghost.css left: ev.pageX - offsetX $(".size").text(parseInt(width - ev.pageX + offsetX) + "px") $doc.on "mouseup", (ev) -> e.preventDefault() if dragging $doc.off "mousemove mouseup" $(".properties").css "flex": "0 0 " + (width - ghost.offset().left + offsetX) + "px" ghost.remove(); dragging = false # --- PROPERTIES SCHEMA --- propertiesSchema = { liveEdit: true editors: [ field: "name" title: "Name" type: "text" required: true multiEdit: false featured: true , field: "username" title: "Username" type: "text" required: true multiEdit: false featured: true , field: "email" title: "E-mail" type: "email" required: false multiEdit: false , field: "password" title: "Password" type: "password" placeHolder: "Password" required: true multiEdit: false featured: true toolTip: "Enter the user's password" hint: "Minimum 6 characters" validate: (value, objs) -> if value.length < 6 then return "Password is too short! Minimum 6 characters!" , field: "phone" title: "Phone" type: "text" required: false multiEdit: true hint: "Format: 0-000-000-0000 x000" , field: "website" title: "Website" type: "text" required: false multiEdit: true , field: "address.country" title: "Country" type: "text" required: false multiEdit: true , field: "address.city" title: "City" type: "text" required: false multiEdit: true , field: "address.streetC" title: "Street" type: "text" required: false multiEdit: true , field: "address.zipcode" title: "Zip" type: "number" required: false multiEdit: true , field: "company.name" title: "Company name" type: "text" required: false multiEdit: true , field: "company.bs" title: "Company keywords" type: "text" required: false multiEdit: true , field: "bio" title: "Biography" type: "textarea" required: false multiEdit: true rows: 3 , field: "marked" title: "Marked" type: "boolean" required: false default: false multiEdit: true , field: "status" title: "Status" type: "boolean" required: true default: true multiEdit: true , field: "deleteUser" title: "Delete user(s)" type: "button" schemaFunction: true multiEdit: true onclick: (objs)-> _.remove dataSource, (obj) -> if objs.indexOf(obj) isnt -1 obj.__row.remove() return true refreshDataCount() selectedObjs = [] refreshEditor() ], onChanged: (editor, value, objs) -> console.log "Field '#{editor.fieldName}' value changed to '#{value}'" # showObjects() $.each selectedObjs, (i, item) -> initRow item.__row, item }

Description

Responsive user administration UI (add, edit, delete, multi-select) with propertiesJS and Faker.js. You can resize the right sidebar too :)
Term
Mon, 11/27/2017 - 21:18

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv