mirror/Anki-Android
0
0
Fork 0
mirror of https://github.com/ankidroid/Anki-Android.git synced 2024-09-20 12:02:16 +02:00
Code

Add doctype html (i.e. html5) to the card template.

Browse Source 
Rename the card templates.
Set the charset to utf-8 on the card.
Don’t do horizontal align.
Let the webkit worry about resizing images.
Vertical centering without tables as an option. Thanks to @hssm
Use inner div with margins and make margins smaller.
Checkbox to center vertically (old style) or not (everything at top, like desktop).
Semi-automatically remove a few trailing spaces.
Separate the chess and legacy ruby css into extra files.
Add CSS classes to identify android devices
This commit is contained in:
ospalh 2013-06-12 10:20:06 +02:00
parent 53022a8e1b
commit e13a901c58
8 changed files with 118 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
assets/card_template.html
View File

@ -1,62 +1,21 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///android_asset/flashcard_css" />
<script type="text/javascript">
function init() {
var imgs = document.getElementsByTagName('img');
var n = imgs.length;
while (n--) {
var img = imgs[n];
if(img.src != "file:///android_asset/media_playback_start2.png")
{
addEvent(img, 'load', resizeImage);
}
}
}
function addEvent(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + ev, fn);
}
}
function resizeImage(e)
{
if (!e) var e = window.event;
var img = e.currentTarget || e.srcElement;
availableWidth = window.ankidroid.getAvailableWidth();
var newImg = new Image();
newImg.src = img.src;
var imageHeight = newImg.height;
var imageWidth = newImg.width;
if(imageHeight != 0 && imageWidth != 0)
{
if(imageWidth > availableWidth)
{
var scaleFactor = imageWidth / availableWidth;
imageHeight = imageHeight / scaleFactor;
imageWidth = imageWidth / scaleFactor;
}
img.height = imageHeight;
img.width = imageWidth;
}
else
{
img.height = 0;
img.width = 0;
img.src = img.src;
}
}
</script>
<style>::style::</style>
</head>
<body class="mobile">
<span class="::class::">::content::</span>
<script type="text/javascript">
init();
window.location.href = "#question"
</script>
</body>
<!doctype html>
<html class="mobile android linux js">
<head>
<title>AnkidDroid Flashcard</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="file:///android_asset/flashcard.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/ruby.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/chess.css">
<style>
::style::
</style>
</head>
<body class="::class::">
<div id="content">
::content::
</div>
<script type="text/javascript">
window.location.href = "#question"
</script>
</body>
</html>

19
assets/chess.css Normal file
View File

@ -0,0 +1,19 @@
.chess_board {
border:1px solid #333;
}
.chess_board td {
background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
-webkit-box-shadow:inset 0 0 0 1px #fff;
height:30px;
width:30px;
font-size:22px;
vertical-align:middle;
text-align:center;
}
.chess_board tr:nth-child(odd) td:nth-child(even),
.chess_board tr:nth-child(even) td:nth-child(odd) {
background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}

23
assets/flashcard.css Normal file
View File

@ -0,0 +1,23 @@
body {
margin: 0px;
padding: 0px;
}
#content {
margin: 0.5em;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertically_centered {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
}

53
assets/flashcard_css
View File

@ -1,53 +0,0 @@
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
display: table;
vertical-align: middle;
}
.card {
display: table-cell;
vertical-align: middle;
width: 100%;
font-size: 250%;
}
.legacy_ruby_rb {
display: inline-block;
text-align: center;
line-height: 1;
white-space: nowrap;
vertical-align: baseline;
margin: 0;
padding: 0;
}
.legacy_ruby_rt {
display: block;
text-decoration: none;
line-height: 1.2;
font-weight: normal;
font-size: 0.64em;
}
.chess_board
{
border:1px solid #333;
}
.chess_board td
{
background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
-webkit-box-shadow:inset 0 0 0 1px #fff;
height:30px;
width:30px;
font-size:22px;
vertical-align:middle;
text-align:center;
}
.chess_board tr:nth-child(odd) td:nth-child(even), .chess_board tr:nth-child(even) td:nth-child(odd)
{
background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}

17
assets/ruby.css Normal file
View File

@ -0,0 +1,17 @@
.legacy_ruby_rb {
display: inline-block;
text-align: center;
line-height: 1;
white-space: nowrap;
vertical-align: baseline;
margin: 0;
padding: 0;
}
.legacy_ruby_rt {
display: block;
text-decoration: none;
line-height: 1.2;
font-weight: normal;
font-size: 0.64em;
}

2
res/values/10-preferences.xml
View File

@ -170,6 +170,8 @@
<string name="animation_speed_summ">Duration of transition animations: XXX ms</string>
<string name="eink_display">E-Ink Display Optimization</string>
<string name="eink_display_summ">Disable all animations and do some optimization for E-Ink Display</string>
<string name="vertical_centering">Center card content vertically</string>
<string name="vertical_centering_summ">Center the content of the cards vertically instead of showing it at the top.</string>
<!-- deck_properties.xml -->
<!--<string name="deck_properties">Deck properties</string>-->
<!--<string name="sync_on">Synchronize this deck</string>-->

5
res/xml/preferences.xml
View File

@ -288,6 +288,11 @@
android:key="fullscreenReview"
android:summary="@string/fullscreen_review_summ"
android:title="@string/fullscreen_review" />
<CheckBoxPreference
android:defaultValue="false"
android:key="centerVertically"
android:summary="@string/vertical_centering_summ"
android:title="@string/vertical_centering" />
<CheckBoxPreference
android:key="showEstimates"
android:title="@string/show_estimates"

58
src/com/ichi2/anki/Reviewer.java
View File

@ -240,6 +240,7 @@ public class Reviewer extends AnkiActivity {
private boolean mShowProgressBars;
private boolean mPrefFadeScrollbars;
private boolean mPrefUseTimer;
private boolean mPrefCenterVertically;
private boolean mShowAnimations = false;
private boolean mSimpleInterface = false;
private boolean mCurrentSimpleInterface = false;
@ -729,8 +730,8 @@ public class Reviewer extends AnkiActivity {
}
Themes.showThemedToast(Reviewer.this, leechMessage, true);
}
mCurrentCard = values[0].getCard();
mCurrentCard = values[0].getCard();
if (mCurrentCard == null) {
// If the card is null means that there are no more cards scheduled for review.
mNoMoreCards = true;
@ -749,13 +750,13 @@ public class Reviewer extends AnkiActivity {
Reviewer.this.unblockControls();
Reviewer.this.displayCardQuestion();
}
// Since reps are incremented on fetch of next card, we will miss counting the
// last rep since there isn't a next card. We manually account for it here.
if (mNoMoreCards) {
mSched.setReps(mSched.getReps() + 1);
}
Long[] elapsed = AnkiDroidApp.getCol().timeboxReached();
if (elapsed != null) {
int nCards = elapsed[1].intValue();
@ -765,7 +766,7 @@ public class Reviewer extends AnkiActivity {
Themes.showThemedToast(Reviewer.this, timeboxMessage, true);
AnkiDroidApp.getCol().startTimebox();
}
// if (mChosenAnswer.getText().equals("")) {
// setDueMessage();
// }
@ -989,7 +990,7 @@ public class Reviewer extends AnkiActivity {
// as the card to answer, no card will be answered.
DeckTask.launchDeckTask(DeckTask.TASK_TYPE_ANSWER_CARD, mAnswerCardHandler, new DeckTask.TaskData(mSched,
null, 0));
// Since we aren't actually answering a card, decrement the rep count
mSched.setReps(mSched.getReps() - 1);
}
@ -1067,9 +1068,9 @@ public class Reviewer extends AnkiActivity {
if (!isFinishing()) {
// try {
if (AnkiDroidApp.colIsOpen()) {
WidgetStatus.update(this, mSched.progressToday(null, mCurrentCard, true));
WidgetStatus.update(this, mSched.progressToday(null, mCurrentCard, true));
}
// } catch (JSONException e) {
// throw new RuntimeException(e);
// }
@ -1285,7 +1286,7 @@ public class Reviewer extends AnkiActivity {
}
}
if (AnkiDroidApp.colIsOpen()) {
onCreate(mSavedInstanceState);
onCreate(mSavedInstanceState);
} else {
finish();
}
@ -1521,7 +1522,7 @@ public class Reviewer extends AnkiActivity {
mProgressDialog = StyledProgressDialog.show(Reviewer.this, "",
getResources().getString(R.string.saving_changes), true);
}
DeckTask.launchDeckTask(DeckTask.TASK_TYPE_UNDO, mAnswerCardHandler, new DeckTask.TaskData(mSched));
DeckTask.launchDeckTask(DeckTask.TASK_TYPE_UNDO, mAnswerCardHandler, new DeckTask.TaskData(mSched));
}
}
@ -1614,7 +1615,7 @@ public class Reviewer extends AnkiActivity {
return easy ? EASE_EASY : EASE_MID;
default:
return 0;
}
}
} catch (RuntimeException e) {
AnkiDroidApp.saveExceptionReportFile(e, "Reviewer-getRecommendedEase");
closeReviewer(DeckPicker.RESULT_DB_ERROR, true);
@ -2040,6 +2041,7 @@ public class Reviewer extends AnkiActivity {
mWaitQuestionSecond = preferences.getInt("timeoutQuestionSeconds", 60);
mScrollingButtons = preferences.getBoolean("scrolling_buttons", false);
mDoubleScrolling = preferences.getBoolean("double_scrolling", false);
mPrefCenterVertically = preferences.getBoolean("centerVertically", false);
mGesturesEnabled = AnkiDroidApp.initiateGestures(this, preferences);
if (mGesturesEnabled) {
@ -2146,24 +2148,24 @@ public class Reviewer extends AnkiActivity {
}
if (mSimpleCard.getVisibility() != View.VISIBLE || (mCard != null && mCard.getVisibility() == View .VISIBLE)) {
mSimpleCard.setVisibility(View.VISIBLE);
mCard.setVisibility(View.GONE);
mCard.setVisibility(View.GONE);
}
} else {
if (mCard == null) {
mCard = createWebView();
mCardFrame.addView(mCard);
mCardFrame.addView(mCard);
if (!mUseQuickUpdate) {
mNextCard = createWebView();
mNextCard.setVisibility(View.GONE);
mCardFrame.addView(mNextCard, 0);
mCard.setBackgroundColor(mCurrentBackgroundColor);
mCard.setBackgroundColor(mCurrentBackgroundColor);
mCustomFontStyle = getCustomFontsStyle() + getDefaultFontStyle();
}
}
if (mCard.getVisibility() != View.VISIBLE || (mSimpleCard != null && mSimpleCard.getVisibility() == View .VISIBLE)) {
mSimpleCard.setVisibility(View.GONE);
mCard.setVisibility(View.VISIBLE);
mCard.setVisibility(View.VISIBLE);
}
}
}
@ -2276,7 +2278,7 @@ public class Reviewer extends AnkiActivity {
private void initTimer() {
mShowTimer = mCurrentCard.showTimer();
if (mShowTimer && mCardTimer.getVisibility() == View.INVISIBLE) {
switchVisibility(mCardTimer, View.VISIBLE);
switchVisibility(mCardTimer, View.VISIBLE);
} else if (!mShowTimer && mCardTimer.getVisibility() != View.INVISIBLE) {
switchVisibility(mCardTimer, View.INVISIBLE);
}
@ -2469,7 +2471,11 @@ public class Reviewer extends AnkiActivity {
// CSS class for card-specific styling
String cardClass = "card card" + (mCurrentCard.getOrd()+1);
if (mPrefCenterVertically) {
cardClass += " vertically_centered";
}
Log.i(AnkiDroidApp.TAG, "content card = \n" + content);
StringBuilder style = new StringBuilder();
style.append(mCustomFontStyle);
@ -2550,7 +2556,7 @@ public class Reviewer extends AnkiActivity {
/**
* Reads the text (using TTS) for the given side of a card.
*
*
* @param card The card to play TTS for
* @param cardSide The side of the current card to play TTS for
*/
@ -2568,7 +2574,7 @@ public class Reviewer extends AnkiActivity {
/**
* Returns the configuration for the current {@link Card}.
*
*
* @return The configuration for the current {@link Card}
*/
private JSONObject getConfigForCurrentCard() {
@ -2578,7 +2584,7 @@ public class Reviewer extends AnkiActivity {
/**
* Returns the deck ID of the given {@link Card}.
*
*
* @param card The {@link Card} to get the deck ID
* @return The deck ID of the {@link Card}
*/
@ -2780,7 +2786,7 @@ public class Reviewer extends AnkiActivity {
/**
* Adds a div html tag around the contents to have an indication, where answer/question is displayed
*
*
* @param content
* @param isAnswer if true then the class attribute is set to "answer", "question" otherwise.
* @return
@ -2810,7 +2816,7 @@ public class Reviewer extends AnkiActivity {
* Anything that threatens common sense will break this logic, eg nested span/divs with CSS classes having font-size
* declarations with relative units (40% dif inside 120% div inside 60% div). Broken HTML also breaks this.
* Feel free to improve, but please keep it short and fast.
*
*
* @param content The HTML content that will be font-size-adjusted.
* @param percentage The relative font size percentage defined in preferences
* @return
@ -2881,7 +2887,7 @@ public class Reviewer extends AnkiActivity {
/**
* Calculates a dynamic font size depending on the length of the contents taking into account that the input string
* contains html-tags, which will not be displayed and therefore should not be taken into account.
*
*
* @param htmlContents
* @return font size respecting MIN_DYNAMIC_FONT_SIZE and MAX_DYNAMIC_FONT_SIZE
*/
@ -3129,7 +3135,7 @@ public class Reviewer extends AnkiActivity {
break;
case GESTURE_UNDO:
if(mSched.getCol().undoAvailable()) {
undo();
undo();
}
break;
case GESTURE_EDIT:
@ -3417,7 +3423,7 @@ public class Reviewer extends AnkiActivity {
XMLReader xmlReader) {
// if(tag.equalsIgnoreCase("div")) {
// output.append("\n");
// } else
// } else
if(tag.equalsIgnoreCase("strike") || tag.equals("s")) {
int len = output.length();
if(opening) {
@ -3458,7 +3464,7 @@ public class Reviewer extends AnkiActivity {
if ((new File(path)).exists()) {
Drawable d = Drawable.createFromPath(path);
d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
return d;
return d;
} else {
return null;
}