A Pen by Kevin Imig on CodePen.
Created
March 27, 2016 20:05
-
-
Save anonymous/dd1d03193ef231e84b64 to your computer and use it in GitHub Desktop.
User Card Concept #Upload
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div id="items" class="_list"> | |
| <section class="__card"> | |
| <div class="__cardheader"> | |
| <span class="__delete-button">Delete</span> | |
| <a id="imguser" class="__imguserlink" href="#user"> | |
| <div class="__imgwrap"> | |
| <img class="__imgself"src="https://www.placecage.com/181/181" alt="John Doe" /> | |
| </div> | |
| <span class="__nameuser">Cameron Poe</span> | |
| </a> | |
| <time datetime="2016-03-25T19:00">25.03.2016</time> | |
| <span class="__cutcard deleteswipe"><i class="material-icons">delete_sweep</i></span> | |
| </div> | |
| <div class="__cardinfo"> | |
| <div class="_img-upload"> | |
| <img src="https://images.unsplash.com/photo-1453282716202-de94e528067c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ac9b38e57a8a0724058cdcbe6a687aa8" alt="dummyimage" /> | |
| </div> | |
| </div> | |
| <div class="_info-content"> | |
| <a href="#Cameron">Cameron</a> uploaded <strong>holidays.png</strong>. | |
| </div> | |
| </section> | |
| <section class="__card"> | |
| <div class="__cardheader"> | |
| <span class="__delete-button">Delete</span> | |
| <a id="imguser" class="__imguserlink" href="#user"> | |
| <div class="__imgwrap"> | |
| <img class="__imgself"src="http://www.stevensegallery.com/181/181" alt="Bill Murray" /> | |
| </div> | |
| <span class="__nameuser">Steven Segal</span> | |
| </a> | |
| <time datetime="2016-03-25T19:00">25.03.2016</time> | |
| <span class="__cutcard deleteswipe"><i class="material-icons">delete_sweep</i></span> | |
| </div> | |
| <div class="__cardinfo"> | |
| <div class="_todolist"> | |
| <ul> | |
| <label for="todolist">Today To Do</label> | |
| <li><input type="checkbox" checked="true" name="vehicle1" value="Bike">Wake Up</li> | |
| <li><input type="checkbox" checked="true" name="vehicle1" value="Bike">Survive</li> | |
| <li><input type="checkbox" name="vehicle1" value="Bike">Back to sleep</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="_info-content"> | |
| <a href="#steven">Steven</a> add Todo <strong>Meeting Project X</strong>. | |
| </div> | |
| </section> | |
| <section class="__card"> | |
| <div class="__cardheader"> | |
| <span class="__delete-button">Delete</span> | |
| <a id="imguser" class="__imguserlink" href="#user"> | |
| <div class="__imgwrap"> | |
| <img class="__imgself"src="http://www.fillmurray.com/181/181" alt="Bill Murray" /> | |
| </div> | |
| <span class="__nameuser">Bill Murray</span> | |
| </a> | |
| <time datetime="2016-03-25T19:00">26.03.2016</time> | |
| <span class="__cutcard deleteswipe"><i class="material-icons">delete_sweep</i></span> | |
| </div> | |
| <div class="__cardinfo"> | |
| <div class="_img-upload"> | |
| <img src="https://images.unsplash.com/photo-1433162653888-a571db5ccccf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cf237e64d8b950edfc9f0e84c71c9b0d" alt="dummyimage" /> | |
| </div> | |
| </div> | |
| <div class="_info-content"> | |
| <a href="#bill">Bill</a> uploaded <strong>tiffi_dog.png</strong>. | |
| </div> | |
| </section> | |
| <section class="__card"> | |
| <div class="__cardheader"> | |
| <span class="__delete-button">Delete</span> | |
| <a id="imguser" class="__imguserlink" href="#user"> | |
| <div class="__imgwrap"> | |
| <img class="__imgself"src="https://www.placecage.com/181/181" alt="John Doe" /> | |
| </div> | |
| <span class="__nameuser">Cameron Poe</span> | |
| </a> | |
| <time datetime="2016-03-25T19:00">25.03.2016</time> | |
| <span class="__cutcard deleteswipe"><i class="material-icons">delete_sweep</i></span> | |
| </div> | |
| <div class="__cardinfo"> | |
| <div class="_img-upload"> | |
| <img src="https://images.unsplash.com/photo-1453282716202-de94e528067c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ac9b38e57a8a0724058cdcbe6a687aa8" alt="dummyimage" /> | |
| </div> | |
| </div> | |
| <div class="_info-content"> | |
| <a href="#Cameron">Cameron</a> uploaded <strong>holidays.png</strong>. | |
| </div> | |
| </section> | |
| <section class="__card"> | |
| <div class="__cardheader"> | |
| <span class="__delete-button">Delete</span> | |
| <a id="imguser" class="__imguserlink" href="#user"> | |
| <div class="__imgwrap"> | |
| <img class="__imgself"src="http://www.fillmurray.com/181/181" alt="Bill Murray" /> | |
| </div> | |
| <span class="__nameuser">Bill Murray</span> | |
| </a> | |
| <time datetime="2016-03-25T19:00">26.03.2016</time> | |
| <span class="__cutcard deleteswipe"><i class="material-icons">delete_sweep</i></span> | |
| </div> | |
| <div class="__cardinfo"> | |
| <div class="_img-upload"> | |
| <img src="https://images.unsplash.com/photo-1433162653888-a571db5ccccf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cf237e64d8b950edfc9f0e84c71c9b0d" alt="dummyimage" /> | |
| </div> | |
| </div> | |
| <div class="_info-content"> | |
| <a href="#bill">Bill</a> uploaded <strong>tiffi_dog.png</strong>. | |
| </div> | |
| </section> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready( function() { | |
| /*TOGGLE_DELETE_BUTTON*/ | |
| $( ".deleteswipe" ).on("click change",function() { | |
| $(this).parent(".__cardheader").toggleClass("in"); | |
| }); | |
| /*DELETE_CARD*/ | |
| $(".__delete-button").on("click", function() { | |
| $(this).closest(".__card").remove(); | |
| console.log($(this).closest(".__card")) | |
| }); | |
| $("input").prop('disabled', true); | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $primary_color: tomato; | |
| $secondary_color: #f1f1f1; | |
| $font-color: #555555; | |
| $secondary-font-size: 0.9rem; | |
| $special-font-color: #6E9FAF; | |
| @mixin text_decoration_none { | |
| text-decoration: none; | |
| } | |
| @mixin secondary_text { | |
| font: { | |
| size: 0.9rem; | |
| } | |
| color: $font-color; | |
| } | |
| /*animations*/ | |
| @keyframes flipout { | |
| 0% {right: 0%;} | |
| 50% {right: 22%;} | |
| 80% {right: 15%;} | |
| 100% {right: 26%;} | |
| } | |
| /*globals*/ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #f8f8f8; | |
| } | |
| a{ | |
| @include text_decoration_none; | |
| } | |
| /*globals-end*/ | |
| .container { | |
| width: 350px; | |
| margin: 30px auto; | |
| } | |
| #items { | |
| &._list { | |
| width: 100%; | |
| height: 620px; | |
| padding: 0px 5px 0 5px; | |
| overflow: scroll; | |
| background: #E6E6E6; | |
| border: 1px solid #EAEAEA; | |
| section.__card { | |
| border: 1px solid $secondary_color; | |
| margin: 7px 0; | |
| transition: .5s ease-in-out; | |
| overflow: hidden; | |
| } | |
| .__cardheader { | |
| height: 75px; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| transition: .5s ease-in-out; | |
| right: 0; | |
| background: white; | |
| &.in { | |
| right: 26%; | |
| background: #f5f5f5; | |
| animation-name: flipout; | |
| animation-duration: .5s; | |
| } | |
| .__imguserlink { | |
| text-decoration: none; | |
| padding: 0 0 0 10px; | |
| display: flex; | |
| align-items: center; | |
| .__imgwrap { | |
| height: 45px; | |
| width: 45px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| img { | |
| width: 45px; | |
| height: 45px; | |
| zoom: 1; | |
| } | |
| } | |
| .__nameuser { | |
| color: #555; | |
| margin: 0 8px; | |
| font-size: 0.9rem | |
| } | |
| } | |
| time { | |
| color: #888888; | |
| font-size: .7rem; | |
| margin: 0 9px; | |
| } | |
| .__cutcard { | |
| position: absolute; | |
| right: 10px; | |
| bottom: 7px; | |
| color: darken($secondary_color,10); | |
| cursor: pointer; | |
| font-size: 20px; | |
| transition: .3s ease-in-out; | |
| &:hover { | |
| color: darken($secondary_color,20); | |
| } | |
| } | |
| .__delete-button { | |
| background: #c0392b; | |
| position: absolute; | |
| color: white; | |
| height: 75px; | |
| width: 90px; | |
| align-items: center; | |
| display: flex; | |
| justify-content: center; | |
| right: -91px; | |
| top: 0; | |
| cursor: pointer; | |
| } | |
| } | |
| /*CARD-INFO*/ | |
| ._info-content { | |
| background: white; | |
| width:100%; | |
| padding: 9px 6px; | |
| @include secondary_text; | |
| a { | |
| color: $special-font-color; | |
| font-weight: 600; | |
| } | |
| } | |
| .__cardinfo { | |
| background: white; | |
| width: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| /*IMAGE UPLOAD*/ | |
| ._img-upload { | |
| height: 130px; | |
| img { | |
| width: 100%; | |
| height: auto; | |
| top: -20%; | |
| position: absolute; | |
| } | |
| } | |
| /*TODOLIST*/ | |
| ._todolist { | |
| border-bottom: 1px solid $secondary_color; | |
| border-top: 1px solid $secondary_color; | |
| padding-bottom: 6px; | |
| ul { | |
| list-style-type: none; | |
| label { | |
| font-size: 1.3rem; | |
| font-weight: 500; | |
| padding: 5px 0; | |
| display: block; | |
| } | |
| li { | |
| margin: 5px 0; | |
| input { | |
| margin-right: 10px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment