user_reporting_modal.vue 3.87 KB
Newer Older
Tae Hoon's avatar
Tae Hoon committed
1
<template>
2
  <Modal
HJ's avatar
HJ committed
3
    v-if="isOpen"
Tae Hoon's avatar
Tae Hoon committed
4
    @backdropClicked="closeModal"
HJ's avatar
HJ committed
5
  >
6
    <div class="user-reporting-panel panel">
HJ's avatar
HJ committed
7 8 9
      <div class="panel-heading">
        <div class="title">
          {{ $t('user_reporting.title', [user.screen_name]) }}
Tae Hoon's avatar
Tae Hoon committed
10 11
        </div>
      </div>
HJ's avatar
HJ committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
      <div class="panel-body">
        <div class="user-reporting-panel-left">
          <div>
            <p>{{ $t('user_reporting.add_comment_description') }}</p>
            <textarea
              v-model="comment"
              class="form-control"
              :placeholder="$t('user_reporting.additional_comments')"
              rows="1"
              @input="resize"
            />
          </div>
          <div v-if="!user.is_local">
            <p>{{ $t('user_reporting.forward_description') }}</p>
            <Checkbox v-model="forward">
              {{ $t('user_reporting.forward_to', [remoteInstance]) }}
            </Checkbox>
          </div>
          <div>
            <button
              class="btn btn-default"
              :disabled="processing"
              @click="reportUser"
            >
              {{ $t('user_reporting.submit') }}
            </button>
            <div
              v-if="error"
              class="alert error"
            >
              {{ $t('user_reporting.generic_error') }}
Tae Hoon's avatar
Tae Hoon committed
43
            </div>
HJ's avatar
HJ committed
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
          </div>
        </div>
        <div class="user-reporting-panel-right">
          <List :items="statuses">
            <template
              slot="item"
              slot-scope="{item}"
            >
              <div class="status-fadein user-reporting-panel-sitem">
                <Status
                  :in-conversation="false"
                  :focused="false"
                  :statusoid="item"
                />
                <Checkbox
                  :checked="isChecked(item.id)"
                  @change="checked => toggleStatus(checked, item.id)"
                />
              </div>
            </template>
          </List>
        </div>
Tae Hoon's avatar
Tae Hoon committed
66 67
      </div>
    </div>
68
  </Modal>
Tae Hoon's avatar
Tae Hoon committed
69 70 71 72 73 74 75 76 77 78
</template>

<script src="./user_reporting_modal.js"></script>

<style lang="scss">
@import '../../_variables.scss';

.user-reporting-panel {
  width: 90vw;
  max-width: 700px;
Tae Hoon's avatar
Tae Hoon committed
79 80
  min-height: 20vh;
  max-height: 80vh;
Tae Hoon's avatar
Tae Hoon committed
81

Tae Hoon's avatar
Tae Hoon committed
82
  .panel-heading {
83 84 85 86 87 88 89 90
    .title {
      text-align: center;
      // TODO: Consider making these as default of panel
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
Tae Hoon's avatar
Tae Hoon committed
91 92
  }

Tae Hoon's avatar
Tae Hoon committed
93 94
  .panel-body {
    display: flex;
Tae Hoon's avatar
Tae Hoon committed
95
    flex-direction: column-reverse;
Tae Hoon's avatar
Tae Hoon committed
96 97 98
    border-top: 1px solid;
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
Tae Hoon's avatar
Tae Hoon committed
99
    overflow: hidden;
Tae Hoon's avatar
Tae Hoon committed
100 101 102
  }

  &-left {
Tae Hoon's avatar
Tae Hoon committed
103
    padding: 1.1em 0.7em 0.7em;
Tae Hoon's avatar
Tae Hoon committed
104 105 106 107
    line-height: 1.4em;
    box-sizing: border-box;

    > div {
Tae Hoon's avatar
Tae Hoon committed
108
      margin-bottom: 1em;
Tae Hoon's avatar
Tae Hoon committed
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

      &:last-child {
        margin-bottom: 0;
      }
    }

    p {
      margin-top: 0;
    }

    textarea.form-control {
      line-height: 16px;
      resize: none;
      overflow: hidden;
      transition: min-height 200ms 100ms;
      min-height: 44px;
      width: 100%;
    }

    .btn {
      min-width: 10em;
      padding: 0 2em;
    }
Tae Hoon's avatar
Tae Hoon committed
132 133 134

    .alert {
      margin: 1em 0 0 0;
Tae Hoon's avatar
Tae Hoon committed
135
      line-height: 1.3em;
Tae Hoon's avatar
Tae Hoon committed
136
    }
Tae Hoon's avatar
Tae Hoon committed
137 138 139
  }

  &-right {
140 141
    display: flex;
    flex-direction: column;
Tae Hoon's avatar
Tae Hoon committed
142
    overflow-y: auto;
Tae Hoon's avatar
Tae Hoon committed
143
  }
Tae Hoon's avatar
Tae Hoon committed
144

Tae Hoon's avatar
Tae Hoon committed
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
  &-sitem {
    display: flex;
    justify-content: space-between;

    > .status-el {
      flex: 1;
    }

    > .checkbox {
      margin: 0.75em;
    }
  }

  @media all and (min-width: 801px) {
    .panel-body {
      flex-direction: row;
    }

    &-left {
      width: 50%;
      max-width: 320px;
      border-right: 1px solid;
Tae Hoon's avatar
Tae Hoon committed
167 168
      border-color: $fallback--border;
      border-color: var(--border, $fallback--border);
Tae Hoon's avatar
Tae Hoon committed
169
      padding: 1.1em;
Tae Hoon's avatar
Tae Hoon committed
170

Tae Hoon's avatar
Tae Hoon committed
171 172
      > div {
        margin-bottom: 2em;
Tae Hoon's avatar
Tae Hoon committed
173 174
      }
    }
Tae Hoon's avatar
Tae Hoon committed
175 176 177 178

    &-right {
      width: 50%;
      flex: 1 1 auto;
Tae Hoon's avatar
Tae Hoon committed
179
      margin-bottom: 12px;
Tae Hoon's avatar
Tae Hoon committed
180
    }
Tae Hoon's avatar
Tae Hoon committed
181 182 183
  }
}
</style>