Skip to content

Instantly share code, notes, and snippets.

@yamoo9

yamoo9/angularJS-directives-expressions-login-header-bar.html

Last active August 30, 2016 07:19
Download ZIP

Revisions

  1. yamoo9 revised this gist Dec 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularJS-directives-expressions-login-header-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
    </head>
    <body data-ng-init="member={name: 'yamoo9', log_in: true, is_visible: true, status: 'failed'}">
    <body data-ng-init="member={name: 'yamoo9', log_in: false, is_visible: true, status: 'failed'}">

    <!--
    Directives & Expressions
  2. yamoo9 revised this gist Dec 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularJS-directives-expressions-login-header-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    ⊙ ng-class
    ⊙ ng-show
    -->
    <div class="header-bar" data-ng-clock data-ng-switch="member.log_in">
    <div class="header-bar" data-ng-cloak data-ng-switch="member.log_in">
    <div class="notice" data-ng-show="member.is_visible">
    공지사항을 알려드립니다.
    </div>
  3. yamoo9 revised this gist Dec 8, 2015. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions angularJS-directives-expressions-login-header-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,12 @@
    box-shadow: 0px 0px 3px hsla(0,0%,0%,.45);
    font-size: 14px;
    }
    .notice { display: inline-block; color: #A9A9A9; margin-bottom: 0.5em;
    border-bottom: 1px solid #D0D0D0; }
    .notice {
    display: inline-block;
    color: #A9A9A9;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #D0D0D0;
    }
    .success { color: #34C0FF; }
    .failed { color: #FE4940;}
    .signup { color: #7045CF;}
  4. yamoo9 created this gist Dec 8, 2015.
    62 changes: 62 additions & 0 deletions angularJS-directives-expressions-login-header-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <!DOCTYPE html>
    <html lang="ko-KR" data-ng-app>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <title>Directives &amp; Expressions - AngularJS</title>
    <style>
    body {
    min-height: 100vh;
    background-image: linear-gradient(0deg, #ADADAD, #F2F2F2);
    }
    body, .header-bar * {
    margin: 0;
    }
    .header-bar {
    padding: 1em;
    background-color: #fff;
    box-shadow: 0px 0px 3px hsla(0,0%,0%,.45);
    font-size: 14px;
    }
    .notice { display: inline-block; color: #A9A9A9; margin-bottom: 0.5em;
    border-bottom: 1px solid #D0D0D0; }
    .success { color: #34C0FF; }
    .failed { color: #FE4940;}
    .signup { color: #7045CF;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
    </head>
    <body data-ng-init="member={name: 'yamoo9', log_in: true, is_visible: true, status: 'failed'}">

    <!--
    Directives & Expressions
    ⊙ ng-cloak [FOUC(Flash Of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
    ⊙ ng-switch
    ⊙ ng-class
    ⊙ ng-show
    -->
    <div class="header-bar" data-ng-clock data-ng-switch="member.log_in">
    <div class="notice" data-ng-show="member.is_visible">
    공지사항을 알려드립니다.
    </div>
    <div class="log_in_success" data-ng-switch-when="true" data-ng-class="{
    'success': member.log_in,
    'failed': !member.log_in
    }">
    <p>안녕하세요. {{member.name}}님. 오늘 하루도 행복하세요. :-)</p>
    </div>
    <div class="log_in_failed" data-ng-switch-when="false" data-ng-class="member.status">
    <p>로그인에 실패하셨습니다. :-( 다시 로그인해보시길 바랍니다.</p>
    </div>
    <div class="sign_up" data-ng-switch-default>
    <p>회원 가입을 환영합니다. :-)</p>
    </div>
    </div>

    </body>
    </html>