reputation.html

<!--
@license
Copyright (c) 2018 Swarm City
This code may only be used under the license found at https://github.com/swarmcity/license
-->
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../redux-state.html">
<!--
    Displays and shared styles only
-->
<link rel="import" href="../shared-styles.html">
<link rel="import" href="../displays/display-user-reputation.html">

<dom-module id="page-user-reputation">
    <template>
        <!--
    Page specific styles, if the style is used on more than one page, moveit to shared styles.
-->
        <style include="shared-styles">
            .container {
                height: 100%;
                width: 100vw;
                max-width: 100%;
                min-height: 100vh;
                background-image: var(--sc-bg);
                display: block;
            }
            .container .closebox {
                width: 100%;
                @apply --layout-horizontal;
                @apply --layout-end-justified;
                box-sizing: border-box;
                padding: 0;
                position: fixed;
            }


            .container[wide-layout] .closebox {
                @apply --layout-horizontal;
                @apply --layout-end-justified;
                @apply --layout-start;
                box-sizing: border-box;
                padding: 0px;
                max-width: 100%;
                background-color:red;
            }

            .close {
                @apply --xmark-grey3-small;
                cursor: pointer;
                @apply --close;

            }

            .container .userbox {
                width: 100%;
                box-sizing: border-box;
                padding: 80px 0px 20px 0px;
                @apply --layout-vertical;
                @apply --layout-center-center;
            }

            .container[wide-layout] .userbox {
                padding: 80px 10vw 20px 10vw;
                @apply --layout-horizontal;
                @apply --layout-center;
                @apply --layout-start-justified;
            }

            .container .avatar {
                margin-top: 25px;
                width: 80px;
                height: 80px;
                min-width: 80px;
                min-height: 80px;
                cursor: pointer;
                border-radius: 50%;
                background-size: 40px;
            }

            .container[wide-layout] .avatar {
                margin-top: 0px;
            }

            .container .userinfo {
                @apply --layout-vertical;
                @apply --layout-start;
                @apply --layout-center-center;
                margin-left: 0px;
            }

            .container[wide-layout] .userinfo {
                @apply --layout-vertical;
                @apply --layout-start;
                @apply --layout-center-justified;
                margin-left: 30px;
            }

            .container .username {
                @apply --body-bold;
                margin-top: 15px;
                color: var(--sc-grey4);
            }

            .container[wide-layout] .username {
                @apply --main-title4;
                margin-top: 0px;
                color: var(--sc-grey4);
            }

            .container .linkbox {
                margin-top: 10px;
                text-align: center;
            }

            .container[wide-layout] .linkbox {
                margin-top: 0px;
                text-align: left;
            }

            .link {
                @apply --small-bold;
                border-bottom: 2px dotted var(--sc-blue);
                color: var(--sc-blue);
                cursor: pointer;
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
            only screen and (min--moz-device-pixel-ratio: 1.5),
            only screen and (min-resolution: 240dpi) {
                .close {
                    @apply --retina;
                }
            }
        </style>
        <app-location route="{{route}}"></app-location>
        <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
        <div id="container" class="container" wide-layout$="{{wide}}">
            <div class="closebox">
                <div class="close" on-tap="_close"></div>
            </div>
            <div class="userbox">
                <iron-image class="avatar" sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[avatarHash]]" placeholder="../images/defaultavatar.png">
                </iron-image>
                <div class="userinfo">
                    <div class="username">{{username}}</div>
                    <div class="linkbox">
                        <span class="link"on-tap="_toEtherscan">show on etherscan</span>
                    </div>
                </div>
            </div>
            <display-user-reputation user-address="{{userAddress}}"></display-user-reputation>
        </div>
    </template>

    <script>
        class MyUserReputation extends new ReduxMixin(Polymer.mixinBehaviors([
            Polymer.AppLocalizeBehavior,
        ],
            Polymer.Element
        )) {
            static get is() {
                return 'page-user-reputation';
            }
            static get properties() {
                return {
                    /**
                    * The current user selected language
                    * @type {Object}
                    */
                    language: {
                        type: String,
                        statePath: 'language',
                    },
                    /**
                    * The avatarHash of the user we look up
                    * @type {String}
                    */
                    avatarHash: {
                        type: String,
                    },
                    /**
                    * The username of the user we look up
                    * @type {String}
                    */
                    username: {
                        type: String,
                    },
                    /**
                    * Route is the current URL
                    * @type {Object}
                    */
                    route: {
                        type: Object,
                        observer: '_routeChanged',
                    },
                    /**
                    * The address of the user we look up
                    * @type {String}
                    */
                    userAddress: {
                        type: String,
                    },
                };
            }
            /**
            * takes the user to originating page
            */
            _close() {
                window.history.back();
            }
            /**
            * set the values from the route on route change
            */
            _routeChanged() {
                if (
                    this.route.path.split('/')[1] == 'user-reputation') {
                    this.userAddress = this.route.path.split('/')[2];
                    this.avatarHash = this.route.path.split('/')[3];
                    this.username = this.route.path.split('/')[4];
                }
            }
            /**
            * takes the user to the selected user balance on etherscan
            */
            _toEtherscan() {
                window.open(`https://kovan.etherscan.io/address/${this.userAddress}`, '_blank');
            }
        }
        window.customElements.define(MyUserReputation.is, MyUserReputation);
    </script>
</dom-module>