Change the design of Special:ShareAchievementBadge

Author: lens0021

README.md

@@ -1,7 +1,7 @@
 # AchievementBadges [![Github checks status]][github checks link] [![codecov.io status]][codecov.io link]
 
 AchievementBadges is an extension that provides an [achievement system] for [MediaWiki] wikis.
-See [https://www.mediawiki.org/wiki/Extension:AchievementBadges](https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:AchievementBadges) for more information
+See [https://www.mediawiki.org/wiki/Extension:AchievementBadges](https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:AchievementBadges) for more information.
 
 ## Contributing
 

extension.json

@@ -1,7 +1,7 @@
 {
   "name": "AchievementBadges",
   "version": "0.0.2",
-  "author": ["Lens"],
+  "author": ["[https://femiwiki.com/ Femiwiki Team]"],
   "url": "https://github.com/femiwiki/AchievementBadges",
   "descriptionmsg": "achievementbadges-desc",
   "license-name": "AGPL-3.0-or-later",

i18n/en.json

@@ -10,8 +10,7 @@
   "special-shareachievementsbadge-invalid": "Invalid access",
   "special-shareachievementsbadge-invalid-username": "Invalid username",
   "special-shareachievementsbadge-invalid-achievement-name": "Invalid name of achievement",
-  "special-shareachievementsbadge-message": "Congratulation!",
-  "special-shareachievementsbadge-sub-message": "You achieved it!",
+  "special-shareachievementsbadge-message": "Congratulation! You achieved",
   "special-shareachievementsbadge-title": "{{GENDER:$1|Earned}} achievement $2!",
   "special-shareachievementsbadge-external-description": "$1 just {{GENDER:$1|earned}} the achievement $2 at {{SITENAME}}!",
   "special-shareachievementsbadge-header-share": "Share",

i18n/ko.json

@@ -10,8 +10,7 @@
   "special-shareachievementsbadge-invalid": "올바르지 않은 접근입니다.",
   "special-shareachievementsbadge-invalid-username": "올바르지 않은 사용자 이름입니다.",
   "special-shareachievementsbadge-invalid-achievement-name": "올바르지 않은 도전과제 이름입니다.",
-  "special-shareachievementsbadge-message": "축하합니다!",
-  "special-shareachievementsbadge-sub-message": "도전과제를 달성했습니다!",
+  "special-shareachievementsbadge-message": "축하합니다! 도전과제를 달성했습니다!",
   "special-shareachievementsbadge-title": "$2 도전과제 달성!",
   "special-shareachievementsbadge-external-description": "$1 님이 {{SITENAME}}에서 지금 막 $2 도전과제를 달성했습니다!",
   "special-shareachievementsbadge-header-share": "공유하기",

i18n/qqq.json

@@ -11,7 +11,6 @@
   "special-shareachievementsbadge-invalid-username": "Error message which is shown when given username is wrong",
   "special-shareachievementsbadge-invalid-achievement-name": "Error message which is shown when given achievement key is wrong",
   "special-shareachievementsbadge-message": "Message displayed in [[Special:ShareAchievementBadge]].\n\nParameters:\n* $1 - the name of the user who earn the achievement",
-  "special-shareachievementsbadge-sub-message": "Message displayed in [[Special:ShareAchievementBadge]].\n\nParameters:\n* $1 - the name of the user who earn the achievement",
   "special-shareachievementsbadge-title": "This message is shown in [[Special:ShareAchievementBadge]] as a title.\n* $1 - user's name\n* $2 - the name of the obtained achievement",
   "special-shareachievementsbadge-external-description": "This is used as a Open Graph description.",
   "special-shareachievementsbadge-header-share": "This is a label is used as a header in [[Special:ShareAchievementBadge]].\n\nParameters:\n* $1 - the name of the user who earn the achievement",

includes/Special/SpecialShareAchievementBadge.php

@@ -143,23 +143,17 @@ private function getBadgeData() {
 		if ( !$row ) {
 			return false;
 		}
-		list( $timePeriod, $timestamp ) = Achievement::getHumanTimes( $this->getLanguage(), $this->viewer,
-			$row->log_timestamp );
 		$iconPath = Achievement::getAchievementIcon( $this->obtainerLang, $registry['icon'] ?? null );
-
 		$achvName = $this->achvNameMsg->text();
 		$obtainerText = $this->obtainer->getName();
 		$description = $this->msg( 'achievement-description-' . $this->suffixedKey )
 			->plaintextParams( $obtainerText );
 		return [
 			'text-message' => $this->msg( 'special-shareachievementsbadge-message', $obtainerText )->parse(),
-			'text-sub-message' => $this->msg( 'special-shareachievementsbadge-sub-message', $obtainerText )->parse(),
 			'text-name' => $achvName,
 			'text-description' => $description,
 			'text-obtainer' => $obtainerText,
 			'text-icon' => $iconPath,
-			'text-time-period' => $timePeriod,
-			'text-timestamp' => $timestamp
 		];
 	}
 

includes/templates/SpecialShareAchievementBadge.mustache

@@ -1,13 +1,7 @@
 <div class="message">{{{text-message}}}</div>
-<div class="achievement">
-  <img class="achievement-icon" src="{{text-icon}}" alt="">
-  <div class="achievement-text">
-    <h2 class="achievement-name">{{text-name}}</h2>
-    <div class="achievement-description">{{{text-description}}}</div>
-    <div class="achievement-timestamp" title="{{text-timestamp}}">{{text-time-period}}</div>
-  </div>
-</div>
-<div class="sub-message">{{{text-sub-message}}}</div>
+<div class="achievement-name">{{text-name}}</div>
+<img class="achievement-icon" src="{{text-icon}}" alt="">
+<div class="achievement-description">{{{text-description}}}</div>
 <h3 class="share-achievement">{{text-share-header}}</h2>
 <ul class="share-media">
   {{#data-share}}<li><a id="{{text-id}}" href="{{text-url}}" target="_blank"><span>{{text-text}}</span></a></li>{{/data-share}}

modules/styles/achievement.less

@@ -7,6 +7,29 @@
 
   .achievement {
     margin-bottom: 0.5em;
+    align-items: flex-start;
+    background-color: #f5f5f5;
+    display: flex;
+
+    .achievement-icon {
+      width: 6em;
+      margin: 0.3em 0.6em 0.3em 0.3em;
+    }
+
+    .achievement-text {
+      width: 100%;
+      padding: 0.5em 0.5em 0.5em 0;
+
+      .achievement-name {
+        font-weight: bold;
+        font-size: 1em;
+        margin: 0;
+      }
+
+      .achievement-timestamp {
+        color: gray;
+      }
+    }
   }
 
   .achievement.not-earning {

modules/styles/spacial-achievements.less

@@ -1,5 +1,3 @@
-@import 'achievement.less';
-
 @keyframes coloring {
   0%,
   10% {
@@ -12,23 +10,36 @@
   }
 }
 
-.message,
-.sub-message {
+.message {
   text-align: center;
+  font-weight: normal;
+  font-size: 1.3em;
   margin: 1.5rem 0;
 }
 
-.message {
-  font-size: 1.5em;
+.achievement-name {
+  text-align: center;
   font-weight: bold;
+  border: none;
+  font-size: 1.6em;
+  margin: 0;
+}
+.achievement-icon {
+  display: block;
+  width: 5.5em;
+  margin: 2em auto;
+  animation: coloring 2s forwards;
 }
 
-.achievement {
-  max-width: 30em;
+.achievement-description {
+  text-align: center;
+  max-width: 20em;
+  margin: auto;
 }
 
 .share-achievement {
   text-align: center;
+  font-weight: normal;
   margin: 3em 0 1em;
 }