投稿の表示設定

貢献 特徴
1

こんにちは、

皆さんに、投稿の可視性を全員に明示するための小さな CSS の調整をご紹介したいと思い、投稿しました。当フォーラムでは、ユーザーが作成した投稿の可視性を認識できないことがあり、それがプライベートメッセージなのか、公開の会話なのか判別できず、個人情報が公開されてしまうことがたびたびありました。

そこで、すべての投稿に可視性を明示する CSS コードを作成しました。可視性には 3 つの種類があります。公開、コミュニティ（制限されたカテゴリ）、プライベートです。

これを admin/ に追加してください。
デスクトップ/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Public";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 Private";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 Community";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

モバイル/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Public";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 Private";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 Community";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

共通/<head> セクション :arrow_down:
font-family: 'Font Awesome\ 5 Free', var(--font-family); には Font Awesome のアイコンが含まれているため、これらのアイコンを表示するには <head> セクションに以下を追加する必要があります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Screenshot 2021-03-03 at 19.23.09
Screenshot 2021-03-03 at 19.23.09248×119 2.02 KB
Screenshot 2021-03-03 at 19.24.01
Screenshot 2021-03-03 at 19.24.01323×134 2.74 KB
Screenshot 2021-03-03 at 19.24.36
Screenshot 2021-03-03 at 19.24.36235×100 1.98 KB

アイコンを無効にしたい場合は、このバージョンを使用してください。:arrow_down:

アイコンなし

これを admin/ に追加してください。
デスクトップ/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Public";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Private";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Community";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

モバイル/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Public";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Private";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Community";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

<head> セクションへの追加は不要です。:slight_smile:

ありがとうございました :slight_smile: これがコミュニティの助けになれば幸いです。もし同じ問題に直面している方がいれば、この調整が役立つと思います。:slight_smile:

実際にどのように機能するかは、https://vaperina.cc で確認できます。任意のトピックをクリックすると、投稿に公開可視性のバッジが表示されます。ハンガリー語版です。:slight_smile:

「いいね！」 7
CSS classes for current groups who can view topic?