Template:Hint - Revision history

Fxc: +1

2022-04-12T09:21:30Z

← Older revision		Revision as of 09:21, 12 April 2022
Line 33:		Line 33:
	* [https://wiki.archlinux.org/title/Template:Tip ArchWiki: Template:Tip]: the template on which this one is based on		* [https://wiki.archlinux.org/title/Template:Tip ArchWiki: Template:Tip]: the template on which this one is based on
	* [[Template:Note]]		* [[Template:Note]]
			* [[Template:Info]]
	* [[Template:Warning]]		* [[Template:Warning]]
	</noinclude><includeonly><div role="note" class="template-box template-hint" style="		</noinclude><includeonly><div role="note" class="template-box template-hint" style="

RainSlide: Fix the new line problem, thanks fxc for point ths out, and https://stackoverflow.com/questions/686898

2021-10-07T22:53:49Z

Fix the new line problem, thanks fxc for point ths out, and https://stackoverflow.com/questions/686898

← Older revision		Revision as of 22:53, 7 October 2021
Line 1:		Line 1:
	<noinclude>		<noinclude>
	~~<!-- -->~~
	{{Template}}		{{Template}}

Line 12:		Line 11:

	<nowiki>{{Hint\|This is an hint.}}</nowiki>		<nowiki>{{Hint\|This is an hint.}}</nowiki>
	~~<!-- -->~~
	{{Hint \| This is an hint.}}		{{Hint \| This is an hint.}}
	~~<!-- -->~~
	For a more flexible usage, it doesn't start with "'''Hint:'''" by default,		For a more flexible usage, it doesn't start with "'''Hint:'''" by default,
	you may add it manually with <code><nowiki>'''Hint:'''</nowiki></code>:		you may add it manually with <code><nowiki>'''Hint:'''</nowiki></code>:
	~~<!-- -->~~
	<nowiki>{{Hint\|'''Hint:''' This is another hint.}}</nowiki>		<nowiki>{{Hint\|'''Hint:''' This is another hint.}}</nowiki>
	~~<!-- -->~~
	{{Hint \| '''Hint:''' This is another hint.}}		{{Hint \| '''Hint:''' This is another hint.}}
	~~<!-- -->~~
	== Technical notes ==		== Technical notes ==

Line 35:		Line 34:
	* [[Template:Note]]		* [[Template:Note]]
	* [[Template:Warning]]		* [[Template:Warning]]
	~~<!-- -->~~		</noinclude><includeonly><div role="note" class="template-box template-hint" style="
	</noinclude><includeonly>
	~~<!-- -->~~
	<div role="note" class="template-box template-hint" style="
	display: table;		display: table;
	min-width: 16em;		min-width: 16em;
Line 47:		Line 43:
	color: #003670;		color: #003670;
	background-color: #d1ecfd;		background-color: #d1ecfd;
	">{{{1\|}}}</div>		">{{{1\|}}}</div></includeonly>
	~~<!-- -->~~
	</includeonly>

RainSlide: Add more technical notes

2021-09-22T11:27:06Z

Add more technical notes

← Older revision		Revision as of 11:27, 22 September 2021
Line 24:		Line 24:
	== Technical notes ==		== Technical notes ==

	The boxes use		The boxes use <code>display: table</code> to support both adaptive width and floating siblings, all other alternatives can't archive them as perfect as this solution within just one HTML element. However, it has its own flaw, if you put it into another table, its padding will gone. Avoid putting hints, notes and warnings into any tables until solution was found, or we give up and use two elements for just one box.

	This template uses class <code>.template-box</code> and <code>.template-hint</code>.		This template uses class <code>.template-box</code> and <code>.template-hint</code>.

RainSlide: Add content to Usage and Example

2021-09-22T09:05:06Z

Add content to Usage and Example

← Older revision		Revision as of 09:05, 22 September 2021
Line 7:		Line 7:
	== Usage ==		== Usage ==

	<nowiki>{{Hint\|~~This is an~~ hint.}}</nowiki>		<nowiki>{{Hint\|hint content}}</nowiki>

	== Example ==		== Example ==

	{{Hint\|This is an hint.}}		<nowiki>{{Hint\|This is an hint.}}</nowiki>
	<!-- -->		<!-- -->
			{{Hint \| This is an hint.}}
			<!-- -->
			For a more flexible usage, it doesn't start with "'''Hint:'''" by default,
			you may add it manually with <code><nowiki>'''Hint:'''</nowiki></code>:
			<!-- -->
			<nowiki>{{Hint\|'''Hint:''' This is another hint.}}</nowiki>
			<!-- -->
			{{Hint \| '''Hint:''' This is another hint.}}
			<!-- -->
	== Technical notes ==		== Technical notes ==

	This template uses class <code>.template-box</code> and <code>.template-hint</code> ~~to make the output HTML more parsable~~.		The boxes use

			This template uses class <code>.template-box</code> and <code>.template-hint</code>.
	In the future, if the [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles Extension] is installed on this MediaWiki instance,		In the future, if the [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles Extension] is installed on this MediaWiki instance,
	one may move the embedded inline styles to Template Style files.		one may move the embedded inline styles to Template Style files.
Line 31:		Line 42:
	min-width: 16em;		min-width: 16em;
	min-height: 1.6em;		min-height: 1.6em;
	margin: .5em 0 ~~1em~~;		margin: .5em 0;
	padding: .5em 1em;		padding: .5em 1em;
	border: 1px solid #9bcdfd;		border: 1px solid #9bcdfd;

RainSlide: Remove empty line

2021-09-22T05:24:44Z

Remove empty line

← Older revision		Revision as of 05:24, 22 September 2021
Line 12:		Line 12:

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
			<!-- -->
	== Technical notes ==		== Technical notes ==

RainSlide: Refactor again

2021-09-22T05:20:51Z

Refactor again

← Older revision		Revision as of 05:20, 22 September 2021
Line 1:		Line 1:
	<noinclude>		<noinclude>
			<!-- -->
	{{Template}}		{{Template}}

			A hint box for showing helpful hints.

	== Usage ==		== Usage ==

	~~<pre>~~<nowiki>{{Hint\|This is an hint.}}</nowiki~~></pre~~>		<nowiki>{{Hint\|This is an hint.}}</nowiki>

	== Example ==		== Example ==

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
	~~</noinclude><includeonly><div class="messagebox" style="~~

			== Technical notes ==

			This template uses class <code>.template-box</code> and <code>.template-hint</code> to make the output HTML more parsable.
			In the future, if the [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles Extension] is installed on this MediaWiki instance,
			one may move the embedded inline styles to Template Style files.

			== See also ==

			* [https://wiki.archlinux.org/title/Template:Tip ArchWiki: Template:Tip]: the template on which this one is based on
			* [[Template:Note]]
			* [[Template:Warning]]
			<!-- -->
			</noinclude><includeonly>
			<!-- -->
			<div role="note" class="template-box template-hint" style="
	display: table;		display: table;
	min-width: 16em;		min-width: 16em;
	min-height: 1.6em;		min-height: 1.6em;
	margin: .5em 0;		margin: .5em 0 1em;
			padding: .5em 1em;
			border: 1px solid #9bcdfd;
	color: #003670;		color: #003670;
	background-color: #d1ecfd;		background-color: #d1ecfd;
	~~border-color: #9bcdfd;~~		">{{{1\|}}}</div>
			<!-- -->
	">{{{1\|}}}</div></includeonly>		</includeonly>

RainSlide: Use class="messagebox"

2021-09-22T03:17:21Z

Use class="messagebox"

← Older revision		Revision as of 03:17, 22 September 2021
Line 9:		Line 9:

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
	</noinclude><includeonly><div style="display: table; min-width: 16em; min-height: 1.6em; margin: .5em 0; ~~padding: .5em 1em; border~~: ~~1px solid~~ #~~9bcdfd~~; color: #~~003670~~; ~~background~~-color: #~~d1ecfd~~;">{{{1\|}}}</div></includeonly>		</noinclude><includeonly><div class="messagebox" style="

			display: table;
			min-width: 16em;
			min-height: 1.6em;
			margin: .5em 0;
			color: #003670;
			background-color: #d1ecfd;
			border-color: #9bcdfd;

			">{{{1\|}}}</div></includeonly>

RainSlide: use display: table to work with float: right

2021-09-17T04:25:02Z

use display: table to work with float: right

← Older revision		Revision as of 04:25, 17 September 2021
Line 9:		Line 9:

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
	</noinclude><includeonly><div style="~~box-sizing: border-box; width~~: ~~max-content~~; min-width: 16em~~; max-width: 100%~~; min-height: 2.6em; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>		</noinclude><includeonly><div style="display: table; min-width: 16em; min-height: 1.6em; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>

RainSlide: larger min width, add min height

2021-09-17T03:36:26Z

larger min width, add min height

← Older revision		Revision as of 03:36, 17 September 2021
Line 9:		Line 9:

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
	</noinclude><includeonly><div style="box-sizing: border-box; width: max-content; min-width: ~~8em~~; max-width: 100%; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>		</noinclude><includeonly><div style="box-sizing: border-box; width: max-content; min-width: 16em; max-width: 100%; min-height: 2.6em; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>

RainSlide: Fix max width

2021-09-17T03:30:34Z

Fix max width

← Older revision		Revision as of 03:30, 17 September 2021
Line 9:		Line 9:

	{{Hint\|This is an hint.}}		{{Hint\|This is an hint.}}
	</noinclude><includeonly><div style="width: max-content; min-width: 8em; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>		</noinclude><includeonly><div style="box-sizing: border-box; width: max-content; min-width: 8em; max-width: 100%; margin: .5em 0; padding: .5em 1em; border: 1px solid #9bcdfd; color: #003670; background-color: #d1ecfd;">{{{1\|}}}</div></includeonly>