diff --git a/css/styles.css b/css/styles.css index c279c94..bf9b635 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,6 +19,7 @@ /* 48px */ /* 53px */ /* ?px */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900"); /* line 47, variables.scss */ .font-8 { font-size: 0.5rem !important; @@ -14385,13 +14386,13 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { } /* line 3, fonts.scss */ -.font-regular { - font-weight: 400 !important; +.font-light { + font-weight: 300 !important; } /* line 6, fonts.scss */ -.font-light { - font-weight: 200 !important; +.font-regular { + font-weight: 400 !important; } /* line 9, fonts.scss */ @@ -14410,110 +14411,116 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { } /* line 18, fonts.scss */ +.font-extrabold { + font-weight: 800 !important; +} + +/* line 21, fonts.scss */ .font-normal { font-style: normal !important; } -/* line 21, fonts.scss */ +/* line 24, fonts.scss */ .font-italic { font-style: italic !important; } -/* line 26, fonts.scss */ +/* line 29, fonts.scss */ .text-right { text-align: right; } -/* line 29, fonts.scss */ +/* line 32, fonts.scss */ .text-center { text-align: center; } -/* line 32, fonts.scss */ +/* line 35, fonts.scss */ .text-left { text-align: left; } -/* line 36, fonts.scss */ +/* line 39, fonts.scss */ .text-white { color: white; } -/* line 39, fonts.scss */ +/* line 42, fonts.scss */ .text-black { color: black; } -/* line 42, fonts.scss */ +/* line 45, fonts.scss */ .text-red { color: #bf0f3d; } -/* line 45, fonts.scss */ +/* line 48, fonts.scss */ .text-grey { - color: #ddd; + color: #ccc; } -/* line 48, fonts.scss */ +/* line 51, fonts.scss */ .text-light-grey { color: #f2f2f2; } -/* line 53, fonts.scss */ +/* line 56, fonts.scss */ .text-upper { text-transform: uppercase; } -/* line 1, global.scss */ +/* line 3, global.scss */ body { font-family: 'Montserrat'; - letter-spacing: 1px; + /* letter-spacing: 1px; */ + font-weight: 600; } -/* line 6, global.scss */ +/* line 9, global.scss */ p, label { margin: 0; } -/* line 11, global.scss */ +/* line 14, global.scss */ a { color: white; text-decoration: none; transition: .4s; outline: none; } -/* line 16, global.scss */ +/* line 19, global.scss */ a:active, a:visited, a:hover, a:focus { outline: none; color: white; text-decoration: none; } -/* line 24, global.scss */ +/* line 27, global.scss */ a:hover { - color: #ddd; + color: #ccc; } -/* line 30, global.scss */ +/* line 33, global.scss */ .container { width: 100%; /* max-width: 1366px; */ padding: 0 20px; } -/* line 36, global.scss */ +/* line 39, global.scss */ .border { border: 1px solid red; } -/* line 41, global.scss */ +/* line 44, global.scss */ .middle { position: absolute; top: 50%; transform: translateY(-50%); } -/* line 47, global.scss */ +/* line 50, global.scss */ .middle-right { position: absolute; right: 0; @@ -14521,7 +14528,7 @@ a:hover { transform: translateY(-50%); } -/* line 54, global.scss */ +/* line 57, global.scss */ .full-middle { position: absolute; left: 50%; @@ -14529,12 +14536,12 @@ a:hover { transform: translate(-50%, -50%); } -/* line 63, global.scss */ +/* line 66, global.scss */ .bg-alpha { background: rgba(255, 255, 255, 0.5); } -/* line 67, global.scss */ +/* line 70, global.scss */ .pattern { background: white; background-image: url(../images/pattern.jpg); @@ -14542,24 +14549,24 @@ a:hover { background-position: center bottom; } -/* line 74, global.scss */ +/* line 77, global.scss */ .radius { border-radius: 3px; } -/* line 78, global.scss */ +/* line 81, global.scss */ .radius-bottom { border-radius: 0 0 3px 3px; } -/* line 83, global.scss */ +/* line 86, global.scss */ #MainContent { - top: 0; + top: 50px; z-index: 0; - overflow-x: hidden; + overflow: hidden; } -/* line 89, global.scss */ +/* line 92, global.scss */ #map { width: 100%; border-radius: 3px; @@ -14589,8 +14596,8 @@ input::-moz-focus-inner, button::-moz-focus-inner { /* line 14, forms.scss */ input[type=text], input[type=password] { - border: 1px solid #ddd; - color: #ddd; + border: 1px solid #ccc; + color: #ccc; padding: 5px 20px; width: 100%; text-align: left; @@ -14615,7 +14622,7 @@ input[type=button]:hover, input[type=submit]:hover, button:hover { color: white; - background-color: #ddd; + background-color: #ccc; } /* line 46, forms.scss */ @@ -14651,26 +14658,28 @@ header { background: #2f2f2f; height: 50px; width: 100%; + position: fixed; + z-index: 100; } -/* line 9, header.scss */ +/* line 11, header.scss */ header .container .row { height: 50px; } -/* line 12, header.scss */ +/* line 14, header.scss */ header .container .row .logo { height: 25px; } -/* line 16, header.scss */ +/* line 18, header.scss */ header .container .row .menu { text-align: right; } -/* line 18, header.scss */ +/* line 20, header.scss */ header .container .row .menu ul { list-style: none; margin: 0; right: 10px; } -/* line 22, header.scss */ +/* line 24, header.scss */ header .container .row .menu ul li { display: inline-block; color: white; @@ -14683,27 +14692,27 @@ header .container .row .menu ul li { cursor: pointer; transition: .4s; } -/* line 35, header.scss */ +/* line 37, header.scss */ header .container .row .menu ul li a .fa { font-size: 0.875rem; } -/* line 40, header.scss */ +/* line 42, header.scss */ header .container .row .menu ul li.active, header .container .row .menu ul li:hover { border-bottom: 4px solid #bf0f3d; } -/* line 44, header.scss */ +/* line 46, header.scss */ header .container .row .menu ul li.active a:hover, header .container .row .menu ul li:hover a:hover { color: white; } /* line 2, sections/modules.scss */ .modules { - height: calc(100vh - 50px); + min-height: calc(100vh - 50px); width: 100%; } /* line 6, sections/modules.scss */ .modules .sidebar { - height: calc(100vh - 50px); + min-height: calc(100vh - 50px); padding: 50px; } /* line 10, sections/modules.scss */ @@ -14712,7 +14721,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu height: 40px; line-height: 40px; margin: 20px 0 10px 0; - background: #ddd; + background: #ccc; border-radius: 5px; color: white; text-align: center; @@ -14735,7 +14744,19 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu background: #f2f2f2; padding: 50px; } -/* line 40, sections/modules.scss */ +/* line 39, sections/modules.scss */ +.modules .content .drop-action { + transition: .4s; +} +/* line 41, sections/modules.scss */ +.modules .content .drop-action.drop-inactive { + opacity: .3; +} +/* line 45, sections/modules.scss */ +.modules .content .drop-action.droppable.drop-active { + border: 2px solid #bf0f3d; +} +/* line 51, sections/modules.scss */ .modules .content .dropdown { height: 40px; line-height: 36px; @@ -14746,21 +14767,13 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu position: relative; transition: .4s; } -/* line 51, sections/modules.scss */ -.modules .content .dropdown.droppable.drop-active { - border: 2px solid #bf0f3d; -} -/* line 55, sections/modules.scss */ -.modules .content .dropdown.drop-inactive { - opacity: .4; -} -/* line 59, sections/modules.scss */ +/* line 61, sections/modules.scss */ .modules .content .dropdown .label { font-size: 0.75rem; font-weight: bold; color: black; } -/* line 65, sections/modules.scss */ +/* line 67, sections/modules.scss */ .modules .content .dropdown .data { position: absolute; font-size: 0.625rem; @@ -14769,7 +14782,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu right: 10px; top: 0; } -/* line 74, sections/modules.scss */ +/* line 76, sections/modules.scss */ .modules .content .dropdown:after { content: '\f107'; font-family: "FontAwesome"; @@ -14779,46 +14792,166 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu top: 0; right: -25px; } -/* line 84, sections/modules.scss */ +/* line 86, sections/modules.scss */ .modules .content .dropdown.active { - border: 2px solid #ddd; + border: 2px solid #ccc; } -/* line 86, sections/modules.scss */ +/* line 88, sections/modules.scss */ .modules .content .dropdown.active:after { - color: #ddd; + color: #ccc; } -/* line 95, sections/modules.scss */ +/* line 97, sections/modules.scss */ .modules .content .dropdown-links .link { width: 100%; height: 20px; - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; + border-top: 1px solid #ccc; + border-right: 1px solid #ccc; } -/* line 100, sections/modules.scss */ +/* line 102, sections/modules.scss */ .modules .content .dropdown-links .link:first-child { - border-left: 1px solid #ddd; + border-left: 1px solid #ccc; } -/* line 104, sections/modules.scss */ +/* line 106, sections/modules.scss */ .modules .content .dropdown-links .link.source { border: 0; position: relative; } -/* line 107, sections/modules.scss */ +/* line 109, sections/modules.scss */ .modules .content .dropdown-links .link.source:before { content: ''; position: absolute; right: 50%; height: 100%; - border-left: 1px solid #ddd; + border-left: 1px solid #ccc; } -/* line 118, sections/modules.scss */ +/* line 120, sections/modules.scss */ .modules .content .div-drop { width: 100px; padding: 10px; margin: 20px 0 10px 0; - background: #ddd; + background: #ccc; + color: white; + text-align: center; + font-size: 0.75rem; + border-radius: 5px; +} +/* line 133, sections/modules.scss */ +.modules .content .user-sheet { + position: relative; + background: white; + border: 2px solid #f2f2f2; + border-radius: 6px; + padding: 90px 15px 15px 15px; +} +/* line 140, sections/modules.scss */ +.modules .content .user-sheet .fa { + position: absolute; + left: 15px; + top: 15px; +} +/* line 145, sections/modules.scss */ +.modules .content .user-sheet .name { + position: absolute; + left: 35px; + top: 15px; + font-size: 0.75rem; + font-weight: 700; +} +/* line 152, sections/modules.scss */ +.modules .content .user-sheet .rule { + position: absolute; + left: 35px; + top: 35px; + font-size: 0.625rem; +} +/* line 158, sections/modules.scss */ +.modules .content .user-sheet .avatar { + position: absolute; + right: 15px; + top: 15px; + height: 60px; + width: 60px; +} +/* line 164, sections/modules.scss */ +.modules .content .user-sheet .avatar img { + height: 60px; + width: 60px; +} +/* line 170, sections/modules.scss */ +.modules .content .user-sheet .modules-title { + font-size: 0.5rem; + text-transform: uppercase; +} +/* line 176, sections/modules.scss */ +.modules .content .user-sheet .modules-container .div-drag { + width: 100%; + height: 40px; + line-height: 36px; + margin: 10px 0; + background: #bf0f3d; color: white; text-align: center; font-size: 0.75rem; border-radius: 5px; } +/* line 189, sections/modules.scss */ +.modules .content .user-sheet .modules-empty { + width: 100%; + height: 40px; + line-height: 36px; + margin: 15px 0; + background: white; + color: #ccc; + text-align: center; + font-size: 0.75rem; + border: 2px dotted #ccc; + border-radius: 5px; +} + +/* line 208, sections/modules.scss */ +#dropConfirm { + display: none; + position: fixed; + left: 0; + top: 50px; + height: calc(100vh - 50px); + width: 100%; + background: rgba(0, 0, 0, 0.6); + overflow: hidden; +} +/* line 218, sections/modules.scss */ +#dropConfirm .alert { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + text-align: center; + border-radius: 4px; + padding: 30px 80px; +} +/* line 229, sections/modules.scss */ +#dropConfirm .alert .title { + margin: 10px 0 20px 0; + font-size: 0.75rem; + font-weight: 700; +} +/* line 236, sections/modules.scss */ +#dropConfirm .alert .button { + padding: 5px 20px; + margin: 10px; + border-radius: 4px; + cursor: pointer; + text-align: center; + font-size: 0.625rem; + text-transform: uppercase; + color: white; +} +/* line 246, sections/modules.scss */ +#dropConfirm .alert .button.confirm { + background: #bf0f3d; +} +/* line 249, sections/modules.scss */ +#dropConfirm .alert .button.discard { + background: black; +} diff --git a/images/avatar/luca.png b/images/avatar/luca.png new file mode 100644 index 0000000..92fbefc Binary files /dev/null and b/images/avatar/luca.png differ diff --git a/images/avatar/sara.png b/images/avatar/sara.png new file mode 100644 index 0000000..38898b9 Binary files /dev/null and b/images/avatar/sara.png differ diff --git a/index.php b/index.php index 3c84c03..8072920 100644 --- a/index.php +++ b/index.php @@ -28,7 +28,6 @@ - "> @@ -46,6 +45,7 @@ + diff --git a/js/scripts.js b/js/scripts.js index 0c79f9c..0a237a9 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,27 +1,53 @@ + function allowDrop(ev) { - ev.preventDefault(); + ev.preventDefault(); } function drag(ev) { - ev.dataTransfer.setData("text", ev.target.id); - $('.dropdown').addClass('drop-inactive'); - $('.droppable').removeClass('drop-inactive').addClass('drop-active'); + ev.dataTransfer.setData("ID", ev.target.id) + $('.drop-action').addClass('drop-inactive') + $('.droppable').removeClass('drop-inactive').addClass('drop-active') } function drop(ev) { - ev.preventDefault(); - - var data = ev.dataTransfer.getData("text"); - var module = $('#'+data); - var parent = module.parent(); - -// parent.append($(module.get(0))); -// ev.target.appendChild(module.get(0)); - console.log(module.text()); + + ev.preventDefault(); + + const target = $(ev.currentTarget).find('.modules-container') + const overlay = $('#dropConfirm') + const discard = overlay.find('.discard') + const confirm = overlay.find('.confirm') + const data = ev.dataTransfer.getData("ID") + + let once = true + + console.log('TARGET1:',target) + + overlay.fadeIn() + + discard.on('click',()=>{ + if(once){ + overlay.fadeOut() + once = false + } + }) + + confirm.on('click', ()=>{ + + if(once){ + const module = $('#'+data) + target.append('
'+module.text()+'
') + overlay.fadeOut() + once = false + } + + }) + } function dragLeave(ev) { - $('.dropdown').removeClass('drop-inactive'); - $('.droppable').removeClass('drop-active'); + $('.drop-action').removeClass('drop-inactive') + $('.droppable').removeClass('drop-active') } + diff --git a/modules.php b/modules.php index 62c4773..9b1a944 100644 --- a/modules.php +++ b/modules.php @@ -27,7 +27,7 @@
-